Toolbar
Import
import { Toolbar } from '@pzeta/vue-components'
Esempio Base
Props
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
variant | 'default' | 'filled' | 'outlined' | 'flat' | 'transparent' | 'default' | Variante visiva |
size | 'small' | 'medium' | 'large' | 'medium' | Dimensione della toolbar |
rounded | 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'lg' | Arrotondamento dei bordi |
shadow | boolean | false | Ombra esterna |
sticky | boolean | false | Posizionamento sticky (rimane visibile in scroll) |
responsiveHorizontal | boolean | false | Layout orizzontale responsive su schermi piccoli |
ariaLabelledby | string | null | null | ID dell'elemento che etichetta la toolbar. Insieme ad ariaLabel attiva role="toolbar" con navigazione APG |
ariaLabel | string | null | null | Nome accessibile della toolbar. Quando valorizzato (o ariaLabelledby) il contenitore assume role="toolbar" con navigazione da tastiera APG (frecce/Home/End + roving tabindex); senza nome resta un contenitore neutro senza role |
class | string | object | string[] | — | Classe CSS aggiuntiva |
style | object | string | — | Stile inline aggiuntivo |
Emits
Nessun evento emesso.
Slot
| Slot | Scope | Descrizione |
|---|---|---|
start | — | Area sinistra (azioni primarie, logo, pulsanti) |
center | — | Area centrale (titolo, barra di ricerca) |
end | — | Area destra (azioni secondarie, pulsante salva) |
default | — | Contenuto semplice quando nessuno dei tre slot nominati è usato |
Esempi
Toolbar con azioni e ricerca
Toolbar sticky
Varianti visive
Toolbar con contenuto semplice (slot default)
Accessibilità
Il pattern role="toolbar" (APG) viene attivato solo quando la toolbar ha un nome accessibile, cioè quando si valorizza ariaLabel oppure ariaLabelledby. In quel caso il contenitore espone role="toolbar" con navigazione da tastiera tramite frecce, Home/End e roving tabindex sui control interni. Senza un nome accessibile la toolbar resta un contenitore neutro (nessun role), per evitare di annunciare una toolbar non etichettata agli screen reader.
Assegna sempre ariaLabel (o ariaLabelledby) quando la toolbar raggruppa control operativi: è il prerequisito per il pattern toolbar accessibile.
TypeScript
import type { ToolbarProps, ToolbarSlots, ToolbarVariant, ToolbarSize, ToolbarRounded } from '@pzeta/vue-components'
Tabs
Navigazione a schede composta da cinque sub-componenti (Tabs, TabList, Tab, TabPanels, TabPanel). Supporta varianti visive, orientamento, badge, scroll e modalità closable.
Layout
Componenti per strutturare e organizzare il contenuto nelle pagine. Includono contenitori, separatori, navigazione e aree scrollabili.