Tombol alih

Tombol alih bisa nyala atau mati, dan ia menyatakannya lewat aria-pressed. Tebal di editor teks, filter yang sedang diterapkan, panel yang sedang ditampilkan.

Tidak ada masukan tersembunyi di baliknya: aria-pressed adalah keseluruhan keadaannya, jadi tombol alih yang dirender di server menampilkan sebuah pengaturan dan setPressed() yang mengubahnya. Raih checkbox() ketika ia berada di dalam formulir, dan toggle() — sakelarnya — ketika ia adalah pengaturan di dalam sebuah daftar.

Tombol alih dasar

stack({ direction: 'row', gap: 'sm' },
  toggleButton({ pressed: true }, 'Tebal'),
  toggleButton('Miring'),
  toggleButton('Bergaris bawah'),
)

Varian

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

Ukuran

stack({ direction: 'row', gap: 'sm', align: 'center' },
  toggleButton({ size: 'sm', pressed: true }, 'Kecil'),
  toggleButton({ size: 'md', pressed: true }, 'Sedang'),
  toggleButton({ size: 'lg', pressed: true }, 'Besar'),
)

Dengan ikon

Tombol alih yang hanya berikon butuh nama yang dapat diakses — berikan aria-label, yang jatuh ke tombolnya.

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

Dinonaktifkan

stack({ direction: 'row', gap: 'sm' },
  toggleButton({ pressed: true, disabled: true }, 'Nyala, terkunci'),
  toggleButton({ disabled: true }, 'Mati, terkunci'),
)

Membuatnya melakukan sesuatu

Satu panggilan membalik atributnya; penataannya mengikuti. Di dalam toggleGroup() berpilihan tunggal, ia juga melepaskan saudara-saudaranya.

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

Atau dari modul Anda sendiri, ketika sudah ada yang berjalan:

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

setPressed('bold')

Props

Prop	Tipe	Bawaan	Deskripsi
`pressed`	`boolean`	`false`	Menyetel aria-pressed. setPressed() mengubahnya setelahnya.
`variant`	`'outline' \| 'ghost' \| 'soft'`	`'outline'`	Seperti apa rupa tombol yang tidak tertekan.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Skala yang sama dengan button().
`disabled`	`boolean`	`false`	Menonaktifkan tombolnya.

Selebihnya jatuh ke button() — startIcon, endIcon, onclick, dan selebihnya. Untuk sekumpulan darinya, lihat toggleGroup().