Pulsante a due stati

Un pulsante a due stati è acceso o spento, e lo dice con aria-pressed. Il grassetto in un editor di testo, un filtro attivo, un pannello mostrato.

Dietro non c’è alcun input nascosto: aria-pressed è tutto lo stato, quindi un pulsante renderizzato dal server mostra un’impostazione e setPressed() è ciò che la cambia. Ricorri a checkbox() quando sta in un form, e a toggle() — l’interruttore — quando è un’impostazione in un elenco.

Pulsante di base

stack({ direction: 'row', gap: 'sm' },
  toggleButton({ pressed: true }, 'Grassetto'),
  toggleButton('Corsivo'),
  toggleButton('Sottolineato'),
)

Varianti

stack({ gap: 'md' },
  stack({ direction: 'row', gap: 'sm' },
    toggleButton({ variant: 'outline', pressed: true }, 'Outline acceso'),
    toggleButton({ variant: 'outline' }, 'Outline spento'),
  ),
  stack({ direction: 'row', gap: 'sm' },
    toggleButton({ variant: 'ghost', pressed: true }, 'Ghost acceso'),
    toggleButton({ variant: 'ghost' }, 'Ghost spento'),
  ),
  stack({ direction: 'row', gap: 'sm' },
    toggleButton({ variant: 'soft', pressed: true }, 'Soft acceso'),
    toggleButton({ variant: 'soft' }, 'Soft spento'),
  ),
)

Dimensioni

stack({ direction: 'row', gap: 'sm', align: 'center' },
  toggleButton({ size: 'sm', pressed: true }, 'Piccolo'),
  toggleButton({ size: 'md', pressed: true }, 'Medio'),
  toggleButton({ size: 'lg', pressed: true }, 'Grande'),
)

Con icone

Un pulsante a due stati con la sola icona ha bisogno di un nome accessibile — passa aria-label, che arriva fino al pulsante.

stack({ direction: 'row', gap: 'sm' },
  toggleButton({
    pressed: true,
    'aria-label': 'Grassetto',
    title: 'Grassetto',
    startIcon: icon('bold'),
  }),
  toggleButton({
    'aria-label': 'Corsivo',
    title: 'Corsivo',
    startIcon: icon('italic'),
  }),
)

Disattivato

stack({ direction: 'row', gap: 'sm' },
  toggleButton({ pressed: true, disabled: true }, 'Acceso, bloccato'),
  toggleButton({ disabled: true }, 'Spento, bloccato'),
)

Fargli fare qualcosa

Una sola chiamata gira l’attributo; lo stile la segue. Dentro un toggleGroup() a scelta singola lascia andare anche i fratelli.

toggleButton({ onclick: "import('/su/pressed.js').then(m=>m.set(this))" }, 'Grassetto')

Oppure dal tuo modulo, quando ne hai già uno in esecuzione:

import { setPressed } from 'sitelo/ui/client'

setPressed('bold')

Props

Prop	Tipo	Predefinito	Descrizione
`pressed`	`boolean`	`false`	Imposta aria-pressed. setPressed() lo cambia dopo.
`variant`	`'outline' \| 'ghost' \| 'soft'`	`'outline'`	Che aspetto ha il pulsante non premuto.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Stessa scala di button().
`disabled`	`boolean`	`false`	Disattiva il pulsante.

Tutto il resto passa a button() — startIcon, endIcon, onclick e via dicendo. Per un insieme di questi, vedi toggleGroup().