SwipeListItem

Import

import { SwipeListItem } from '@pzeta/vue-components'
// oppure tramite plugin:
import { DataPlugin } from '@pzeta/vue-components'
app.use(DataPlugin)

Esempio Base

Props

SwipeListItemAction

Emits

Slot

Comportamento del gesto

Esempi

Coda di lavorazioni

Azione non eseguibile (resistenza)

Quando un'azione non è possibile — per esempio una rilevazione senza cliente associato — lo swipe in quella direzione deve opporre resistenza, non fallire alla fine del gesto.

Con :resistance="0" la direzione bloccata non si muove affatto:

Soglia personalizzata

Visibilità dei pulsanti di fallback

Colori custom

Accessibilità

Le gesture non sono utilizzabili da tastiera né da screen reader: il componente espone perciò le stesse azioni anche come pulsanti.

• Con actionButtons="always" (default) i pulsanti restano nel DOM su ogni viewport, quindi le azioni sono sempre raggiungibili con Tab e annunciate dagli screen reader. È l'unica modalità che garantisce l'accesso da tastiera anche su desktop.
• actionButtons="mobile" replica il pattern sm:hidden: i pulsanti scompaiono da sm in su. Usare solo se il contenuto dello slot offre già un percorso alternativo alle azioni.
• tapLabel rende il contenuto un target attivabile con Invio o Spazio, con role="button" e aria-label. Da omettere quando lo slot contiene già un elemento focusabile proprio, per non annidare due controlli.
• Il pannello dell'azione rivelata è aria-hidden="true": è feedback visivo del gesto, non contenuto.
• La preferenza prefers-reduced-motion: reduce elimina le transizioni di rientro e l'attesa prima dell'emissione dell'evento.

TypeScript

import type {
  SwipeListItemProps,
  SwipeListItemEmits,
  SwipeListItemAction,
  SwipeListItemActionButtons,
} from '@pzeta/vue-components'

// SwipeListItemActionButtons = 'always' | 'mobile' | 'never'

const conferma: SwipeListItemAction = {
  label: 'Conferma',
  icon: 'pi pi-check',
  color: 'success',
  disabled: false,
}