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`

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...").
Per screen reader, aggiungere aria-label al wrapper se label non è visibile.

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.