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
`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)

Ascolto evento click

Comportamento

Il pulsante è posizionato in modo fisso (fixed) in basso a destra (bottom-6 right-6).
Con target: 'window' ascolta window.scrollY; con target: 'parent' cerca il primo genitore con overflow-y: auto o scroll tramite attributo data-scrolltop-container.
L'apparizione/scomparsa usa una transizione animata (fade + translate + scale).
L'icona di default è configurata tramite ConfigPlugin (icons.navigation.scrollTop); la prop icon permette di sovrascriverla.

Accessibilità

Il pulsante ha aria-label gestito 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.