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
`color`	`'primary' \| 'secondary' \| 'success' \| 'info' \| 'warn' \| 'danger'`	`'primary'`	Colore del pulsante principale
`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
`color`	`'primary' \| 'secondary' \| 'success' \| 'info' \| 'warn' \| 'danger'`	No	Colore di sfondo dell'azione
`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

Colori personalizzati per azione

Con icona attiva e label visibili

Con azione disabilitata

Accessibilità

Il pulsante principale ha disabled nativo quando la prop disabled è true.
Ogni azione utilizza title (il campo label) per fornire il tooltip nativo e supporto screen reader.
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.