Layout
Toolbar
Barra degli strumenti con tre zone di posizionamento (start, center, end). Supporta varianti visive, dimensioni, arrotondamento, sticky positioning e layout responsive.
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 (accessibilità) |
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 componente renderizza un div con role="toolbar". La prop ariaLabelledby permette di collegare un elemento esterno come etichetta per screen reader. Assicurarsi che le azioni dentro la toolbar siano navigabili da tastiera.
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.