Przycisk przełączany

Przycisk przełączany jest włączony albo wyłączony i mówi o tym przez aria-pressed. Pogrubienie w edytorze tekstu, zastosowany filtr, pokazany panel.

Nie stoi za nim żaden ukryty input: aria-pressed to cały stan, więc przycisk renderowany na serwerze pokazuje ustawienie, a setPressed() jest tym, co je zmienia. Po checkbox() sięgaj, gdy rzecz należy do formularza, a po toggle() — przełącznik — gdy jest ustawieniem na liście.

Podstawowy przycisk

stack({ direction: 'row', gap: 'sm' },
  toggleButton({ pressed: true }, 'Pogrubienie'),
  toggleButton('Kursywa'),
  toggleButton('Podkreślenie'),
)

Warianty

stack({ gap: 'md' },
  stack({ direction: 'row', gap: 'sm' },
    toggleButton({ variant: 'outline', pressed: true }, 'Outline włączony'),
    toggleButton({ variant: 'outline' }, 'Outline wyłączony'),
  ),
  stack({ direction: 'row', gap: 'sm' },
    toggleButton({ variant: 'ghost', pressed: true }, 'Ghost włączony'),
    toggleButton({ variant: 'ghost' }, 'Ghost wyłączony'),
  ),
  stack({ direction: 'row', gap: 'sm' },
    toggleButton({ variant: 'soft', pressed: true }, 'Soft włączony'),
    toggleButton({ variant: 'soft' }, 'Soft wyłączony'),
  ),
)

Rozmiary

stack({ direction: 'row', gap: 'sm', align: 'center' },
  toggleButton({ size: 'sm', pressed: true }, 'Mały'),
  toggleButton({ size: 'md', pressed: true }, 'Średni'),
  toggleButton({ size: 'lg', pressed: true }, 'Duży'),
)

Z ikonami

Przycisk z samą ikoną potrzebuje dostępnej nazwy — podaj aria-label, który przechodzi na przycisk.

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

Wyłączony

stack({ direction: 'row', gap: 'sm' },
  toggleButton({ pressed: true, disabled: true }, 'Włączony, zablokowany'),
  toggleButton({ disabled: true }, 'Wyłączony, zablokowany'),
)

Żeby coś robił

Jedno wywołanie przerzuca atrybut; styl idzie za nim. Wewnątrz jednokrotnego toggleGroup() puszcza też rodzeństwo.

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

Albo z własnego modułu, gdy już jakiś działa:

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

setPressed('bold')

Propsy

Prop	Typ	Domyślnie	Opis
`pressed`	`boolean`	`false`	Ustawia aria-pressed. setPressed() zmienia je później.
`variant`	`'outline' \| 'ghost' \| 'soft'`	`'outline'`	Jak wygląda przycisk niewciśnięty.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Ta sama skala co button().
`disabled`	`boolean`	`false`	Wyłącza przycisk.

Cała reszta przechodzi do button() — startIcon, endIcon, onclick i tak dalej. Dla zestawu takich zobacz toggleGroup().