Feedback

AvatarGroup

Contenitore che raggruppa e sovrappone più Avatar con spacing configurabile. Ideale per mostrare membri di un team o partecipanti.

Import

import { Avatar, AvatarGroup } from '@pzeta/vue-components'
// oppure tramite plugin:
import { FeedbackPlugin } from '@pzeta/vue-components'
app.use(FeedbackPlugin)

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`spacing`	`'tight' \| 'normal' \| 'loose' \| 'none'`	`'normal'`	Controllo della sovrapposizione tra avatar

Valori spacing

Valore	Sovrapposizione	Uso tipico
`tight`	`-16px`	Gruppi numerosi in spazio limitato
`normal`	`-12px`	Default, bilanciato
`loose`	`-8px`	Gruppi piccoli con più respiro
`none`	`0px` (gap)	Nessuna sovrapposizione, avatar separati

Slot

Slot	Scope	Descrizione
`default`	—	Uno o più componenti `Avatar` da raggruppare

Esempi

Spacing confronto

Con counter "+N"

Note

AvatarGroup è un wrapper <div> con flexbox e z-index gestito automaticamente sugli avatar figli.
L'ordine di rendering degli Avatar nel DOM corrisponde all'ordine visivo (il primo è in fondo, l'ultimo sopra).
Per una visualizzazione ottimale, usare Avatar con shape="circle" all'interno di AvatarGroup.

Accessibilità

Aggiungere aria-label al gruppo per descriverne lo scopo.
Specificare alt su ogni Avatar con immagine.

<AvatarGroup aria-label="Team di sviluppo: 3 membri">
  <Avatar label="A" alt="Alice" shape="circle" />
  <Avatar label="B" alt="Bob" shape="circle" />
  <Avatar label="C" alt="Carlo" shape="circle" />
</AvatarGroup>

TypeScript

import type { AvatarGroupProps } from '@pzeta/vue-components'
import type { AvatarGroupSpacing } from '@pzeta/vue-components'

// AvatarGroupSpacing = 'tight' | 'normal' | 'loose' | 'none'

Avatar

Rappresentazione visiva di un utente tramite immagine, iniziali o icona. Supporta shape circle/square, severity colorata e fallback automatico.

Badge

Indicatore visivo compatto per notifiche, contatori e stati. Supporta severity, varianti, icone e dismissal.