1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Visualización de Datos avatardatagroup

Overlapping Avatars

Pila de avatares superpuestos con recuento numérico de miembros adicionales.

AJ
MK
SL
+4

Uso

Copia y pega este código directamente en tu página de Astro:

astro 
---
import { OverlappingAvatars } from 'astro-component-kit';
---

<AvatarGroupStack>Content</AvatarGroupStack>
--- import { OverlappingAvatars } from 'astro-component-kit'; --- <AvatarGroupStack>Content</AvatarGroupStack>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: 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>
--- --- <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>

Información Rápida

Categoría
Visualización de Datos
Nombre de archivo
OverlappingAvatars.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
avatardatagroup