Layout

Splitter

Layout con pannelli ridimensionabili tramite divisore drag-and-drop. Composto da Splitter e SplitterPanel. Supporta orientamento orizzontale/verticale, dimensioni percentuali, minSize e persistenza stato.

Import

import { Splitter, SplitterPanel } from '@pzeta/vue-components'

Esempio Base

Splitter (root)

Props

Prop	Tipo	Default	Descrizione
`layout`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientamento dei pannelli
`gutterSize`	`number`	`4`	Larghezza/altezza del divisore in pixel
`stateKey`	`string \| null`	`null`	Chiave per la persistenza dello stato (richiede `stateStorage`)
`stateStorage`	`'session' \| 'local'`	`'session'`	Storage per la persistenza (`sessionStorage` o `localStorage`)
`step`	`number`	`5`	Fattore di incremento per ridimensionamento da tastiera (percentuale)

Emits

Evento	Payload	Descrizione
`resizestart`	`{ originalEvent: Event; sizes: number[] }`	Emesso all'inizio del resize
`resize`	`{ originalEvent: Event; sizes: number[] }`	Emesso durante il resize
`resizeend`	`{ originalEvent: Event; sizes: number[] }`	Emesso alla fine del resize con dimensioni finali

Metodi esposti (`defineExpose`)

Metodo	Firma	Descrizione
`resetState`	`() => void`	Azzera lo stato salvato nello storage e reinizializza i pannelli

SplitterPanel

Singolo pannello ridimensionabile.

Props

Prop	Tipo	Default	Descrizione
`size`	`number`	`undefined`	Dimensione iniziale in percentuale (0-100). Se non specificata, lo spazio disponibile viene distribuito uniformemente
`minSize`	`number`	`0`	Dimensione minima in percentuale che il pannello non può scendere sotto

Slot

Slot	Scope	Descrizione
`default`	—	Contenuto del pannello

Esempi

Pannelli con dimensioni definite

Tre pannelli orizzontali

Splitter verticale

Splitter con stato persistente

Splitter annidato

Accessibilità

Il divisore (gutter) ha:

role="separator" con aria-orientation
tabindex="0" per navigazione da tastiera
aria-valuenow, aria-valuemin, aria-valuemax per indicare la posizione corrente
Supporto tasti freccia (resize), Home (minimizza), End (massimizza)
Supporto touch per dispositivi mobili

TypeScript

import type {
  SplitterProps,
  SplitterEmits,
  SplitterPanelProps,
  SplitterLayout,
  SplitterStateStorage,
  SplitterResizeStartEvent,
  SplitterResizeEvent,
  SplitterResizeEndEvent,
} from '@pzeta/vue-components'

ScrollPanel

Area scrollabile con scrollbar personalizzata (colore, larghezza, posizione). Supporta scroll verticale, orizzontale o entrambi, auto-hide, modalità native e metodi programmatici.

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.