Layout
Tabs
Navigazione a schede composta da cinque sub-componenti (Tabs, TabList, Tab, TabPanels, TabPanel). Supporta varianti visive, orientamento, badge, scroll e modalità closable.
Import
import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@pzeta/vue-components'
Esempio Base
Tabs (root)
Props
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
modelValue | string | number | '' | Tab attiva (v-model) |
value | string | number | '' | Alias di modelValue (compatibilità PrimeVue 4.0) |
closable | boolean | false | Abilita il pulsante di chiusura su tutti i tab |
scrollable | boolean | false | Lista tab scorrevole in overflow orizzontale |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Orientamento della navigazione |
variant | 'default' | 'pills' | 'underline' | 'cards' | 'default' | Variante visiva |
size | 'small' | 'medium' | 'large' | 'medium' | Dimensione dei tab |
severity | Severity | undefined | Colore/severità dell'indicatore attivo |
rounded | boolean | false | Bordi arrotondati sui tab |
closeIcon | string | (da config) | Icona personalizzata per la chiusura |
disabled | boolean | false | Disabilita tutti i tab |
Emits
| Evento | Payload | Descrizione |
|---|---|---|
update:modelValue | string | number | Aggiornamento del v-model |
update:value | string | number | Alias per compatibilità |
tabChange | { originalEvent: Event; index: number; value: string | number } | Emesso al cambio di tab |
TabList
Container per i pulsanti Tab con indicatore animato sliding.
Props
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
variant | 'default' | 'pills' | 'underlined' | 'default' | Variante (eredita da Tabs se disponibile) |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Orientamento (eredita da Tabs se disponibile) |
Slot
| Slot | Scope | Descrizione |
|---|---|---|
default | — | Elementi Tab |
Tab
Singolo pulsante di navigazione.
Props
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
value | string | number | — | Identificatore univoco del tab |
header | string | — | Testo del tab (fallback se nessun slot default) |
icon | string | null | undefined | Icona da mostrare prima del testo |
badge | string | number | null | undefined | Badge numerico/testuale |
badgeClass | string | '' | Classe CSS del badge |
disabled | boolean | false | Disabilita il tab |
closable | boolean | false | Mostra il pulsante di chiusura |
as | string | undefined | Tag HTML da renderizzare |
asChild | boolean | false | Modalità headless (espone slot con props/eventi) |
Emits
| Evento | Payload | Descrizione |
|---|---|---|
click | MouseEvent | Click sul tab |
close | Event | Click sul pulsante di chiusura |
Slot (modalità asChild)
| Slot | Scope | Descrizione |
|---|---|---|
default | { class, active, disabled, a11yAttrs, onClick } | Slot headless per rendering personalizzato |
TabPanels
Container per i pannelli di contenuto.
Props
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
variant | 'default' | 'pills' | 'underlined' | 'default' | Variante visiva (eredita da Tabs) |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Orientamento (eredita da Tabs) |
TabPanel
Contenuto di un singolo tab.
Props
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
value | string | number | — | Valore corrispondente al Tab da attivare |
header | string | '' | Titolo (usato in modalità headless) |
disabled | boolean | false | Disabilita il pannello |
as | string | undefined | Tag HTML del wrapper |
asChild | boolean | false | Modalità headless |
Slot
| Slot | Scope | Descrizione |
|---|---|---|
default | — | Contenuto del pannello |
Esempi
Tab con icone e badge
Varianti visive
Orientamento verticale
Accessibilità
TabListrenderizzarole="tablist"conul- Ogni
Tabharole="tab",aria-selectedetabindexgestito automaticamente - Ogni
TabPanelharole="tabpanel"earia-hidden - I tab disabilitati hanno
tabindex="-1"earia-disabled
TypeScript
import type {
TabsProps,
TabsEmits,
TabProps,
TabEmits,
TabPanelProps,
TabsVariant,
TabsOrientation,
} from '@pzeta/vue-components'
Stepper
Wizard multi-step composto da cinque sub-componenti (Stepper, StepList, Step, StepPanels, StepPanel). Supporta modalità lineare (blocca l'avanzamento), orientamento orizzontale/verticale e tracciamento completamento automatico.
Toolbar
Barra degli strumenti con tre zone di posizionamento (start, center, end). Supporta varianti visive, dimensioni, arrotondamento, sticky positioning e layout responsive.