Layout
Panel
Contenitore collassabile con header, body e footer. Supporta toggle con v-model, slot per icone aggiuntive e dimensioni configurabili.
Import
import { Panel } from '@pzeta/vue-components'
Esempio Base
Props
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
header | string | '' | Testo del titolo nell'header |
toggleable | boolean | false | Abilita la funzionalità di collasso/espansione |
collapsed | boolean | false | Stato collassato (usare con v-model:collapsed) |
toggleIcon | string | '' | Icona personalizzata per il pulsante toggle |
size | 'small' | 'medium' | 'large' | 'medium' | Dimensione del pannello |
rounded | boolean | true | Bordi arrotondati |
shadow | boolean | true | Ombra esterna |
border | boolean | true | Bordo visibile |
disabled | boolean | false | Disabilita il toggle |
Emits
| Evento | Payload | Descrizione |
|---|---|---|
update:collapsed | boolean | Emesso quando cambia lo stato collapsed (per v-model) |
expand | — | Emesso quando il pannello viene espanso |
collapse | — | Emesso quando il pannello viene collassato |
toggle | MouseEvent | Emesso al click sul pulsante toggle |
Slot
| Slot | Scope | Descrizione |
|---|---|---|
default | — | Contenuto principale del pannello |
header | — | Header personalizzato (sostituisce la prop header) |
icons | — | Icone/azioni aggiuntive nell'area destra dell'header |
footer | — | Footer del pannello |
Esempi
Panel collassabile con v-model
Panel con header, icons e footer personalizzati
Dimensioni disponibili
Accessibilità
Il pulsante toggle usa aria-expanded per comunicare lo stato corrente. Il pannello è navigabile da tastiera. La prop disabled inibisce l'interazione e viene propagata al pulsante nativo.
TypeScript
import type { PanelProps, PanelEmits, PanelSlots } from '@pzeta/vue-components'
Fieldset
Wrapper HTML fieldset con legenda personalizzabile, funzionalità di toggle collassabile (v-model) e slot per icona toggle personalizzata.
ScrollPanel
Area scrollabile con scrollbar personalizzata (colore, larghezza, posizione). Supporta scroll verticale, orizzontale o entrambi, auto-hide, modalità native e metodi programmatici.