Avatar Group
Avatar Group
Una pila di avatar sovrapposti (assegnatari, partecipanti, collaboratori) che si allarga al passaggio del mouse, con l'overflow raccolto in un badge "+N".
import { AvatarGroup, UserAvatar } from "@pompeitech/vesuvius-ui";Default
AL
GH
AT
MH
+2
Quadrato, grande
AL
GH
AT
MH
+1
Spaziatura personalizzata
Sia la sovrapposizione a riposo che la quantità di apertura al passaggio del mouse sono regolabili — un gruppo più compatto e non espandibile per una riga di tabella compatta:
AL
GH
AT
MH
API
AvatarGroup
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
max | number | 5 | Avatar mostrati prima che il resto si raccolga in un badge "+N". |
size | corrisponde a size di UserAvatar | "default" | Dimensiona solo il badge overflow "+N" — passa tu stesso la stessa dimensione a ogni avatar figlio, così corrispondono visivamente. |
shape | "circle" | "square" | "circle" | Stessa avvertenza — dimensiona solo il badge overflow, fai corrispondere anche i tuoi figli. |
spacing | number | -12 | Sovrapposizione a riposo, in px (negativo = sovrapposto). |
expandedSpacing | number | 4 | Spaziatura una volta passato il mouse — l'intero gruppo ascolta onMouseEnter/onMouseLeave sulla propria radice. |
children | ReactNode | I singoli avatar — tipicamente UserAvatar, ma funziona qualsiasi elemento a forma di avatar. |
Più ogni prop nativa di <div>.
Accessibilità
Il badge overflow "+N" è un elemento puramente visivo senza alcuna interattività per default — se deve essere azionabile (ad es. aprire un elenco completo dei membri), avvolgilo tu stesso in un elemento focalizzabile invece di affidarti solo all'hover, dato che l'apertura al passaggio del mouse non è raggiungibile da tastiera.