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

Accessibilità

Il pulsante principale e il pulsante toggle sono distinti ed entrambi accessibili da tastiera.
Il menu dropdown gestisce il focus trap e la navigazione con frecce direzionali.
Aggiungere aria-label al toggle se il contesto non rende chiara la sua funzione.

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 supporto v-model booleano.