Feedback
Avatar
Rappresentazione visiva di un utente tramite immagine, iniziali o icona. Supporta shape circle/square, severity colorata e fallback automatico.
Import
import { Avatar } from '@pzeta/vue-components'
// oppure tramite plugin:
import { FeedbackPlugin } from '@pzeta/vue-components'
app.use(FeedbackPlugin)
Esempio Base
Props
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
image | string | null | null | URL dell'immagine da visualizzare |
label | string | null | null | Testo (iniziali) visualizzato in assenza di immagine |
icon | string | null | null | Classe CSS dell'icona (es. 'pi pi-user'), fallback se nessuna immagine o label |
size | 'small' | 'medium' | 'large' | 'xlarge' | 'medium' | Dimensione dell'avatar |
shape | 'square' | 'circle' | 'square' | Forma dell'avatar |
alt | string | 'Avatar' | Alt text per l'immagine (accessibilità) |
severity | 'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'contrast' | 'help' | — | Colore di sfondo per avatar con label o icon |
Emits
| Evento | Payload | Descrizione |
|---|---|---|
error | Event | Emesso quando il caricamento dell'immagine fallisce |
Slot
| Slot | Scope | Descrizione |
|---|---|---|
default | — | Contenuto custom di fallback (mostrato solo se nessuna immagine, label o icon è definita) |
Priorità di rendering
Il componente segue questa priorità:
- image — se fornita, mostra l'immagine
- icon — se nessuna immagine (o immagine non caricata), mostra l'icona
- label — se nessuna immagine e nessuna icona, mostra il testo
- slot default — fallback finale
Esempi
Shape e dimensioni
Con gestione errore immagine
Diverse severity
Accessibilità
- Specificare sempre
altquando si usa la propimageper descrivere l'utente. - Per avatar decorativi (solo visivi), usare
alt="". - Se usato con
AvatarGroup, il gruppo gestisce il contesto ARIA.
TypeScript
import type { AvatarProps, AvatarEmits } from '@pzeta/vue-components'
import type { AvatarShape } from '@pzeta/vue-components'
// AvatarShape = 'square' | 'circle'