Buttons

SpeedDial

Floating Action Button espandibile che mostra un insieme di azioni secondarie in direzione configurabile (up, down, left, right) con supporto a tooltip, link e colori per azione.

Import

import { SpeedDial } from '@pzeta/vue-components'
// oppure con plugin selettivo:
import { ButtonsPlugin } from '@pzeta/vue-components'
app.use(ButtonsPlugin)

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`actions`	`SpeedDialAction[]`	`[]`	Array delle azioni da mostrare
`direction`	`'up' \| 'down' \| 'left' \| 'right'`	`'up'`	Direzione di espansione delle azioni
`icon`	`string`	`undefined`	Classe CSS dell'icona del pulsante principale (default dal tema)
`activeIcon`	`string`	`undefined`	Classe CSS dell'icona quando il menu è aperto
`severity`	`Severity`	`'primary'`	Colore (severity) del pulsante principale. 8 valori: `primary`, `secondary`, `success`, `info`, `warn`, `danger`, `contrast`, `help`
`color`	`Severity`	`undefined`	Deprecato — alias di `severity`, mantenuto per retrocompatibilità
`ariaLabel`	`string`	`undefined`	Nome accessibile del FAB. Se assente usa il default i18n `button.speedDialAriaLabel`
`disabled`	`boolean`	`false`	Disabilita il componente
`tooltipPosition`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'left'`	Posizione del tooltip sulle azioni
`showLabels`	`boolean`	`false`	Mostra sempre le label delle azioni (non solo come tooltip)

SpeedDialAction

Ogni azione nel array actions ha la seguente struttura:

Campo	Tipo	Obbligatorio	Descrizione
`id`	`string \| number`	Si	Identificatore univoco dell'azione
`icon`	`string`	Si	Classe CSS dell'icona (es. `'pi pi-pencil'`)
`label`	`string`	No	Label tooltip dell'azione (usata anche come nome accessibile del button)
`severity`	`Severity`	No	Colore (severity) dell'azione (8 valori)
`color`	`Severity`	No	Deprecato — alias di `severity`, mantenuto per retrocompatibilità
`loading`	`boolean`	No	Mostra uno spinner al posto dell'icona
`disabled`	`boolean`	No	Disabilita la singola azione
`href`	`string`	No	URL di navigazione (apre in nuova scheda se valido)
`target`	`'_blank' \| '_self'`	No	Target del link (default `'_blank'`)

Emits

Evento	Payload	Descrizione
`actionClick`	`SpeedDialAction`	Emesso al click su un'azione (non emesso se l'azione è disabilitata)
`open`	—	Emesso all'apertura del menu
`close`	—	Emesso alla chiusura del menu (anche dopo click su un'azione)

Esempi

Direzioni di espansione

Severity personalizzate per azione

Azione con stato di caricamento

Con icona attiva e label visibili

Con azione disabilitata

La prop color (sia sul componente che sulle singole azioni) è deprecata in favore di severity. Resta funzionante come alias per retrocompatibilità, ma usa severity nel codice nuovo.

Accessibilità

Il pulsante principale ha disabled nativo quando la prop disabled è true.
Il FAB principale espone un nome accessibile tramite ariaLabel (o il default localizzato button.speedDialAriaLabel).
Ogni azione utilizza il campo label come nome accessibile del button e come tooltip nativo.
I link nelle azioni vengono aperti con noopener,noreferrer per sicurezza.
Le azioni disabilitate non emettono eventi e hanno l'attributo disabled nativo.
Posizionare lo SpeedDial in un contesto con sufficiente spazio per il menu espanso, usando layout relativi o assoluti.

TypeScript

import type { SpeedDialProps, SpeedDialEmits, SpeedDialAction } from '@pzeta/vue-components'
import type { SpeedDialDirection } from '@pzeta/vue-components'

SelectButton

Componente per selezione singola o multipla tramite un gruppo di pulsanti, compatibile con array di stringhe o oggetti tramite v-model.

SplitButton

Pulsante combinato con azione principale cliccabile e menu dropdown per azioni secondarie, composto internamente da Button e Menu.