Feedback

ProgressBar

Barra di avanzamento per mostrare il progresso di un'operazione. Supporta modalità determinate e indeterminate, striped, animated e severity colorata.

Import

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

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`value`	`number`	`0`	Valore corrente (0-max)
`max`	`number`	`100`	Valore massimo
`mode`	`'determinate' \| 'indeterminate'`	`'determinate'`	Modalità della barra
`severity`	`'primary' \| 'secondary' \| 'success' \| 'info' \| 'warn' \| 'danger' \| 'contrast' \| 'help'`	`'primary'`	Colore della barra di riempimento
`size`	`'small' \| 'medium' \| 'large' \| 'xlarge'`	`'medium'`	Altezza della barra
`label`	`string \| null`	`null`	Etichetta mostrata sopra la barra
`helperText`	`string \| null`	`null`	Testo di aiuto mostrato sotto la barra
`showValue`	`boolean`	`false`	Mostra il valore percentuale
`valueInside`	`boolean`	`false`	Mostra il valore all'interno della barra (richiede `showValue: true`)
`unit`	`string`	`'%'`	Unità visualizzata accanto al valore
`rounded`	`boolean`	`true`	Bordi arrotondati
`striped`	`boolean`	`false`	Pattern a strisce
`animated`	`boolean`	`false`	Anima le strisce (richiede `striped: true`)
`height`	`string \| null`	`null`	Altezza custom CSS (es. `'8px'`), sovrascrive `size`
`ariaValueText`	`string \| null`	`null`	Testo letto dagli screen reader al posto della percentuale (`aria-valuetext`), es. `"3 attività su 5 completate"`. Default: il valore visualizzato (`"60%"`)

Slot

Slot	Scope	Descrizione
`content`	`{ value: number, percentage: number }`	Custom per il testo del valore (usato sia fuori che dentro la barra)

Esempi

Con label e valore

Valore dentro la barra

Severity e aspetto

Valore personalizzato via slot

Caricamento indeterminate

Accessibilità

Il contenitore ha role="progressbar".
In modalità indeterminate, il valore visualizzato è una stringa localizzata ("Caricamento...").
Senza label né aria-label/aria-labelledby del chiamante, la barra si chiama «Caricamento in corso» solo se indeterminate; una barra con un valore si chiama «Avanzamento» (feedback.progressAriaLabel): misura una quota o un punteggio, non un caricamento (dalla 1.24.0).
In modalità determinate espone aria-valuenow/aria-valuemin/aria-valuemax e aria-valuetext, che di default è il valore visualizzato. Quando la percentuale non basta a capire il progresso, passare ariaValueText:

<ProgressBar :value="60" label="Attività" :aria-value-text="`${fatte} attività su ${totali} completate`" />

Gli attributi aria-* passati al componente (aria-label, aria-labelledby, aria-describedby…) finiscono sull'elemento role="progressbar", non sul wrapper esterno dove prima nessuno li leggeva; classi e altri attributi restano sul wrapper (dalla 1.24.0):

<ProgressBar :value="40" aria-label="Spazio occupato" />

TypeScript

import type { ProgressBarProps } from '@pzeta/vue-components'
import type { ProgressBarMode, ProgressBarSize } from '@pzeta/vue-components'

// ProgressBarMode = 'determinate' | 'indeterminate'
// ProgressBarSize = 'small' | 'medium' | 'large' | 'xlarge'

OverlayBadge

Wrapper che posiziona un badge sovrapposto a qualsiasi elemento figlio. Utile per notifiche su icone, avatar e bottoni.

ProgressSpinner

Spinner SVG circolare per indicare caricamento o progresso. Supporta modalità indeterminate e determinate, severity colorata e label.