Aller au contenu

Composant · Divers

AvatarGroup

Stable

Empile des Avatar avec recouvrement. Au-delà de max, un jeton « +N » résume le reste à partir du total réel.

Exemples

max=3, total=8

+5
Voir le code (Svelte) 
<AvatarGroup max={3} total={8}>
  <Avatar name="Ada Lovelace" tone="category1" />
  <Avatar name="Grace Hopper" tone="category3" />
  <Avatar name="Alan Turing" tone="category5" />
</AvatarGroup>

size="sm"

+2
Voir le code (Svelte) 
<AvatarGroup size="sm" max={2} total={4}>
  <Avatar name="Ada Lovelace" size="sm" tone="category2" />
  <Avatar name="Grace Hopper" size="sm" tone="category6" />
</AvatarGroup>

API

PropTypeDefault
maxnumber–
totalnumber–
size"sm" | "md" | "lg" | "xl""md"

Le jeton « +N » s'affiche quand total > max. Pensez à passer la même size aux Avatar enfants.

Tokens utilisés

  • --st-semantic-surface-default
  • --st-category-1 … --st-category-8