Отображение данных avatardatagroup
Overlapping Avatars
Стопка перекрывающихся аватаров с бейджем количества остальных участников.
Живое превью
AJ
MK
SL
+4
Использование
Скопируйте и вставьте этот код на вашу страницу Astro:
astro
---
import { OverlappingAvatars } from 'astro-component-kit';
---
<AvatarGroupStack>Content</AvatarGroupStack>Ручная установка
Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/lib/OverlappingAvatars.astro:
astro
---
---
<div class="av-group">
<div class="av" style="background:#6366f1">AJ</div>
<div class="av" style="background:#8b5cf6">MK</div>
<div class="av" style="background:#ec4899">SL</div>
<div class="av more">+4</div>
</div>
<style>
.av-group { display: flex; align-items: center; }
.av { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #080b14; margin-left: -10px; display: grid; place-items: center; font-size: 0.65rem; font-weight: 800; color: #fff; position: relative; transition: 0.2s; cursor: pointer; }
.av:first-child { margin-left: 0; }
.av:hover { transform: translateY(-4px); z-index: 10; }
.more { background: #1e293b; color: #94a3b8; border-style: dashed; }
</style>Краткая информация
- Категория
- Отображение данных
- Имя файла
OverlappingAvatars.astro- Зависимости
- Нет — чистый Astro + CSS
- Теги
- avatardatagroup