Feedback

Skeleton

Placeholder animato che simula la forma del contenuto durante il caricamento. Supporta shape rettangolare e circolare con animazioni wave, pulse e none.

Import

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

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`shape`	`'rectangle' \| 'circle'`	`'rectangle'`	Forma dello skeleton
`width`	`string`	—	Larghezza (valore CSS, es. `'100%'`, `'200px'`)
`height`	`string`	—	Altezza (valore CSS, es. `'1rem'`, `'48px'`)
`size`	`string`	—	Dimensione unica per `circle` o quando non si specificano `width`/`height` (es. `'3rem'`)
`borderRadius`	`string`	—	Border radius custom CSS (es. `'8px'`)
`animation`	`'wave' \| 'pulse' \| 'none'`	`'wave'`	Tipo di animazione di caricamento
`class`	`string`	`''`	Classe CSS aggiuntiva

Logica dimensioni

shape="circle" o nessuno tra width/height definiti: usa size per entrambe le dimensioni.
Se width o height sono definiti: size viene ignorato.

Esempi

Card skeleton

Lista skeleton

Animazioni

Sostituire con contenuto reale

Accessibilità

Il componente ha aria-hidden="true" poiché è puramente decorativo.
Il contenuto di caricamento deve essere comunicato agli screen reader dal contenitore padre con aria-busy="true" e aria-live="polite".

TypeScript

import type { SkeletonProps } from '@pzeta/vue-components'
import type { SkeletonShape, SkeletonAnimation } from '@pzeta/vue-components'

// SkeletonShape     = 'rectangle' | 'circle'
// SkeletonAnimation = 'wave' | 'pulse' | 'none'

ProgressSpinner

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

Tag

Etichetta colorata per categorizzare contenuti. Simile a Badge ma con padding maggiore e aspetto flat, ideale per label e stato.