Layout

Componenti per strutturare e organizzare il contenuto nelle pagine. Includono contenitori, separatori, navigazione e aree scrollabili.

Layout

Componenti per la struttura e l'organizzazione delle pagine. Tutti i componenti layout sono esportati da LayoutPlugin.

import { LayoutPlugin } from '@pzeta/vue-components'
app.use(LayoutPlugin)

// oppure importazione individuale
import {
  Card, Panel, Divider,
  Accordion, AccordionPanel, AccordionHeader, AccordionContent,
  Tabs, TabList, Tab, TabPanels, TabPanel,
  Stepper, StepList, Step, StepPanels, StepPanel,
  ExpandableFooter, Toolbar, ScrollPanel,
  Splitter, SplitterPanel, Fieldset,
} from '@pzeta/vue-components'

Componenti disponibili

Componente	Sub-componenti	Descrizione
Card	—	Contenitore con cover, header, content e footer
Panel	—	Pannello collassabile con header, body e footer
Divider	—	Separatore orizzontale/verticale con contenuto opzionale
Accordion	AccordionPanel, AccordionHeader, AccordionContent	Pannelli espandibili singoli o multipli
Tabs	TabList, Tab, TabPanels, TabPanel	Navigazione a schede con varianti e orientamento
Stepper	StepList, Step, StepPanels, StepPanel	Wizard multi-step con modalità lineare
ExpandableFooter	—	Footer fisso espandibile all'hover
Toolbar	—	Barra strumenti con slot start/center/end
ScrollPanel	—	Area scrollabile con scrollbar personalizzata
Splitter	SplitterPanel	Pannelli ridimensionabili con divisore drag
Fieldset	—	Wrapper fieldset HTML con legenda collassabile

Pattern comuni

Contenitori semplici

Usa Card per contenuti standalone, Panel quando serve il collasso, Fieldset per gruppi di campi form.

Navigazione

Usa Tabs per navigazione a schede parallele, Stepper per flussi sequenziali (wizard, onboarding, checkout).

Struttura pagina

Usa Splitter per layout divisibili (editor/preview, sidebar/main), Toolbar per barre azioni, ExpandableFooter per footer contestuali.

Contenuto

Usa Accordion per FAQ e sezioni collassabili, ScrollPanel per aree a dimensione fissa con contenuto lungo, Divider per separare sezioni.

Toolbar

Barra degli strumenti con tre zone di posizionamento (start, center, end). Supporta varianti visive, dimensioni, arrotondamento, sticky positioning e layout responsive.

ConfirmDialog

Dialog di conferma modale gestito tramite il composable `useConfirm()`. Si posiziona globalmente nell'app e viene attivato programmaticamente, senza v-model.