Layout
ScrollPanel
Area scrollabile con scrollbar personalizzata (colore, larghezza, posizione). Supporta scroll verticale, orizzontale o entrambi, auto-hide, modalità native e metodi programmatici.
Import
import { ScrollPanel } from '@pzeta/vue-components'
Esempio Base
Props
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
height | string | '200px' | Altezza del pannello (valore CSS) |
width | string | '100%' | Larghezza del pannello (valore CSS) |
orientation | 'vertical' | 'horizontal' | 'both' | 'vertical' | Direzione dello scroll |
step | number | 5 | Fattore di scorrimento con i tasti freccia (moltiplicato per 10px) |
barPosition | 'right' | 'left' | 'right' | Posizione della scrollbar verticale |
barWidth | string | '0.5rem' | Larghezza della scrollbar |
trackColor | string | undefined | Colore del track (sfondo) della scrollbar |
thumbColor | string | undefined | Colore del thumb (maniglia) della scrollbar |
autoHide | boolean | false | Nasconde la scrollbar automaticamente dopo inattività |
autoHideDelay | number | 1000 | Ritardo in ms prima di nascondere la scrollbar (con autoHide) |
native | boolean | false | Usa la scrollbar nativa del browser |
severity | ScrollPanelSeverity | undefined | Colore preimpostato della scrollbar (primary, secondary, success, etc.) |
containerClass | string | — | Classe CSS aggiuntiva per il contenitore |
contentClass | string | — | Classe CSS aggiuntiva per il contenuto |
barClass | string | — | Classe CSS aggiuntiva per la scrollbar |
dt | { bar?: { background?, borderRadius? }; track?: { background?, borderRadius? } } | — | Design token per personalizzazione avanzata della scrollbar |
Emits
| Evento | Payload | Descrizione |
|---|---|---|
scroll | Event | Emesso ad ogni evento di scroll |
scrollEnd | — | Emesso quando lo scroll raggiunge il fondo/destra |
scrollStart | — | Emesso quando lo scroll raggiunge l'inizio/sinistra |
Slot
| Slot | Scope | Descrizione |
|---|---|---|
default | — | Contenuto scrollabile |
Metodi esposti (defineExpose)
| Metodo | Firma | Descrizione |
|---|---|---|
scrollTo | (options: ScrollToOptions) => void | Scrolla alla posizione specificata |
scrollToBottom | () => void | Scrolla al fondo del contenuto |
scrollToTop | () => void | Scrolla all'inizio del contenuto |
getScrollPosition | () => { top: number; left: number } | Ritorna la posizione di scroll corrente |
refresh | () => void | Forza il ricalcolo delle dimensioni della scrollbar |
Esempi
Scroll orizzontale
Scrollbar personalizzata con design tokens
Auto-hide e scroll programmatico
Severità preimpostate
Accessibilità
Il contenuto scrollabile ha tabindex="0" per essere raggiungibile da tastiera. La navigazione da tastiera supporta: ArrowUp/ArrowDown (scroll verticale), ArrowLeft/ArrowRight (scroll orizzontale), PageUp/PageDown, Home/End.
TypeScript
import type {
ScrollPanelProps,
ScrollPanelEmits,
ScrollPanelExpose,
ScrollPanelBarPosition,
ScrollPanelOrientation,
ScrollPanelSeverity,
} from '@pzeta/vue-components'
Panel
Contenitore collassabile con header, body e footer. Supporta toggle con v-model, slot per icone aggiuntive e dimensioni configurabili.
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.