Buttons

SplitButton

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

Import

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

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`label`	`string \| null`	`null`	Label del pulsante principale
`icon`	`string \| null`	`null`	Icona del pulsante principale
`model`	`MenuItem[]`	`[]`	Array di voci di menu per il dropdown
`disabled`	`boolean`	`false`	Disabilita l'intero componente
`loading`	`boolean`	`false`	Stato di caricamento: mostra lo spinner sul pulsante principale e disabilita sia il click sia il toggle del menu
`menuButtonAriaLabel`	`string`	`undefined`	Nome accessibile del toggle che apre il dropdown. Default via i18n `button.splitMenuAriaLabel`
`severity`	`'primary' \| 'secondary' \| 'success' \| 'info' \| 'warn' \| 'danger' \| 'contrast' \| 'help'`	`'primary'`	Severità visiva del pulsante
`raised`	`boolean`	`false`	Stile con elevazione (ombra)
`rounded`	`boolean`	`false`	Bordi completamente arrotondati
`text`	`boolean`	`false`	Stile solo testo senza sfondo
`outlined`	`boolean`	`false`	Stile con bordo e sfondo trasparente
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Dimensione del componente
`dropdownIcon`	`string`	`undefined`	Classe CSS dell'icona del toggle dropdown (default dal tema via `useIcons`)
`buttonProps`	`Record<string, unknown>`	`undefined`	Props extra passate al pulsante principale
`menuButtonProps`	`Record<string, unknown>`	`undefined`	Props extra passate al pulsante del menu
`autofocus`	`boolean`	`false`	Focus automatico al mount sul pulsante principale
`fluid`	`boolean`	`false`	Il componente occupa tutta la larghezza disponibile
`menuPlacement`	`'bottom-start' \| 'bottom-end' \| 'top-start' \| 'top-end'`	`'bottom-start'`	Posizionamento del menu dropdown

Emits

Evento	Payload	Descrizione
`click`	`MouseEvent`	Emesso al click sul pulsante principale
`focus`	`FocusEvent`	Emesso quando il componente riceve il focus
`blur`	`FocusEvent`	Emesso quando il componente perde il focus
`show`	—	Emesso all'apertura del menu dropdown
`hide`	—	Emesso alla chiusura del menu dropdown

Slot

Slot	Scope	Descrizione
`default`	—	Contenuto personalizzato del pulsante principale
`icon`	—	Icona personalizzata per il pulsante principale
`dropdownicon`	—	Icona personalizzata per il pulsante toggle dropdown
`item`	`{ item: MenuItem }`	Template custom per le voci del menu dropdown

Esempi

Dimensioni e stati

Varianti di severity

Menu con separatori

Stato di caricamento

Accessibilità

Il pulsante principale e il pulsante toggle sono distinti ed entrambi accessibili da tastiera.
Il toggle del menu ha un nome accessibile di default (i18n button.splitMenuAriaLabel), personalizzabile con menuButtonAriaLabel.
Il menu dropdown gestisce il focus trap e la navigazione con frecce direzionali.

TypeScript

import type { SplitButtonProps, SplitButtonEmits } from '@pzeta/vue-components'
import type { MenuItem } from '@pzeta/vue-components'

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.

ToggleButton

Pulsante con stato on/off che mostra label e icone differenti in base allo stato attivo, con v-model booleano o mappato su valori di dominio (string/number) tramite onValue/offValue.