Navigation
ScrollTop
Pulsante torna-su che appare quando la pagina supera un certo scroll threshold. Configurabile per target window o elemento parent, comportamento smooth/auto, severity e aspetto del pulsante.
Import
import { ScrollTop } from '@pzeta/vue-components'
Esempio Base
Props
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
target | 'window' | 'parent' | 'window' | Target per l'ascolto degli eventi di scroll. 'window' ascolta la finestra; 'parent' cerca il genitore scrollable |
container | string | null | null | Selettore CSS di uno specifico container scrollabile da osservare e a cui legare lo scroll. Se valorizzato ha precedenza su target e consente più istanze indipendenti su container distinti |
position | 'fixed' | 'absolute' | 'fixed' | Posizionamento del pulsante: fixed (rispetto al viewport) o absolute (rispetto all'antenato posizionato — utile dentro un container) |
threshold | number | 400 | Pixel di scroll necessari per mostrare il pulsante |
icon | string | undefined | Classe CSS dell'icona (default: icona configurata in ConfigPlugin) |
behavior | 'smooth' | 'auto' | 'smooth' | Comportamento dello scroll al click |
severity | Severity | 'primary' | Stile del pulsante (primary, secondary, success, info, warn, danger, help, contrast) |
raised | boolean | true | Aggiunge ombra al pulsante |
rounded | boolean | true | Rende il pulsante circolare |
Emits
| Evento | Payload | Descrizione |
|---|---|---|
click | MouseEvent | Emesso quando il pulsante viene cliccato |
Slot
| Slot | Scope | Descrizione |
|---|---|---|
icon | — | Template personalizzato per l'icona del pulsante |
Esempi
Configurazione base
Diversi stili severity
Pulsante non circolare
Senza ombra
Con icona personalizzata tramite prop
Con slot icona personalizzata
Target parent (container scrollabile)
In un container scrollabile dedicato
Con container (selettore CSS) il pulsante osserva uno specifico riquadro scrollabile; position="absolute" lo ancora all'antenato posizionato così resta dentro l'area del container. È il pattern consigliato per avere più istanze indipendenti nella stessa pagina.
Ascolto evento click
Comportamento
- Il pulsante è posizionato di default in modo fisso (
fixed) in basso a destra (bottom-6 right-6). Conposition="absolute"viene ancorato all'antenato posizionato più vicino (utile dentro un container). - Con
target: 'window'ascoltawindow.scrollY; contarget: 'parent'cerca il primo genitore conoverflow-y: autooscrolltramite attributodata-scrolltop-container. - La prop
container(selettore CSS) ha precedenza sutarget: lega il pulsante a uno specifico riquadro scrollabile e permette più istanze indipendenti nella stessa pagina. - L'apparizione/scomparsa usa una transizione animata (fade + translate + scale).
- L'icona di default è configurata tramite
ConfigPlugin(icons.navigation.scrollTop); la propiconpermette di sovrascriverla.
Accessibilità
- Il pulsante ha
aria-labelgestito tramite@pzeta/vue-i18n(navigation.scrollToTopAriaLabel). - L'evento scroll viene registrato con
{ passive: true }per ottimizzare le performance.
TypeScript
import type { ScrollTopProps, ScrollTopEmits, ScrollTopSlots } from '@pzeta/vue-components'
PanelMenu
Menu accordion multi-livello con pannelli espandibili. Supporta controllo esterno tramite expandedKeys, espansione multipla simultanea, badge e slot per personalizzazione di icone e voci.
TieredMenu
Menu a cascata multi-livello con submenu annidati. Supporta modalità statica e popup con posizionamento automatico, breakpoint responsive e chiusura con tasto Escape.