Panel
Import
import { Panel } from '@pzeta/vue-components'
Esempio Base
Props
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
header | string | '' | Testo del titolo nell'header |
headingLevel | 1 | 2 | 3 | 4 | 5 | 6 | 3 | Livello del titolo (h1…h6), da adattare alla gerarchia della pagina (dalla 1.24.0) |
toggleAriaLabel | string | «Attiva/disattiva pannello» + titolo | Nome accessibile del pulsante di apertura/chiusura (dalla 1.24.0) |
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.
Dalla 1.24.0 il pulsante si chiama «Attiva/disattiva pannello toggleAriaLabel; il titolo non è più un h3 fisso ma segue
headingLevel, così non spezza la gerarchia dei titoli.
TypeScript
import type { PanelProps, PanelEmits, PanelSlots } from '@pzeta/vue-components'
PageHeader
Intestazione di pagina standard per gli MFE montati dalla shell — titolo con icona brand, sottotitolo e slot azioni. Theme-aware, senza background proprio.
ScrollPanel
Area scrollabile con scrollbar personalizzata (colore, larghezza, posizione). Supporta scroll verticale, orizzontale o entrambi, auto-hide, modalità native e metodi programmatici.