Avatar Group
<gstock-avatar-group>
|
GstockAvatarGroup
Tamaño
Utilice el atributo size para cambiar el tamaño de los avatares.
<gstock-avatar-group size="small">
<gstock-avatar image="https://i.pravatar.cc/48?img=38" label="Avatar 1" loading="lazy"></gstock-avatar>
<gstock-avatar image="https://i.pravatar.cc/48?img=12" label="Avatar 2" loading="lazy"></gstock-avatar>
<gstock-avatar image="https://i.pravatar.cc/48?img=58" label="Avatar 3" loading="lazy"></gstock-avatar>
<gstock-avatar image="https://i.pravatar.cc/48?img=37" label="Avatar 4" loading="lazy"></gstock-avatar>
</gstock-avatar-group>
<gstock-avatar-group size="medium">
<gstock-avatar image="https://i.pravatar.cc/64?img=38" label="Avatar 1" loading="lazy"></gstock-avatar>
<gstock-avatar image="https://i.pravatar.cc/64?img=12" label="Avatar 2" loading="lazy"></gstock-avatar>
<gstock-avatar image="https://i.pravatar.cc/64?img=58" label="Avatar 3" loading="lazy"></gstock-avatar>
<gstock-avatar image="https://i.pravatar.cc/64?img=37" label="Avatar 4" loading="lazy"></gstock-avatar>
</gstock-avatar-group>
<gstock-avatar-group size="large">
<gstock-avatar image="https://i.pravatar.cc/80?img=38" label="Avatar 1" loading="lazy"></gstock-avatar>
<gstock-avatar image="https://i.pravatar.cc/80?img=12" label="Avatar 2" loading="lazy"></gstock-avatar>
<gstock-avatar image="https://i.pravatar.cc/80?img=58" label="Avatar 3" loading="lazy"></gstock-avatar>
<gstock-avatar image="https://i.pravatar.cc/80?img=37" label="Avatar 4" loading="lazy"></gstock-avatar>
</gstock-avatar-group>
Lñimite
Utilice el atributo limit para establecer el número máximo de avatares
y un indicador de cuántos más hay.
<gstock-avatar-group limit="3">
<gstock-avatar label="Avatar 1"></gstock-avatar>
<gstock-avatar label="Avatar 2"></gstock-avatar>
<gstock-avatar label="Avatar 3"></gstock-avatar>
<gstock-avatar label="Avatar 4"></gstock-avatar>
<gstock-avatar label="Avatar 5"></gstock-avatar>
</gstock-avatar-group>