Geçiş düğmesi

Geçiş düğmesi açık ya da kapalıdır ve bunu aria-pressed ile söyler. Bir metin düzenleyicideki kalın, uygulanmış bir süzgeç, görünen bir panel.

Arkasında gizli bir girdi yoktur: durumun tamamı aria-pressed değeridir, bu yüzden sunucuda işlenmiş bir geçiş bir ayarı gösterir ve onu değiştiren şey setPressed() olur. Bir forma aitse checkbox() işlevine, bir listedeki bir ayarsa toggle() — anahtar — işlevine uzanın.

Temel geçiş

stack({ direction: 'row', gap: 'sm' },
  toggleButton({ pressed: true }, 'Kalın'),
  toggleButton('Eğik'),
  toggleButton('Altı çizili'),
)

Türevler

stack({ gap: 'md' },
  stack({ direction: 'row', gap: 'sm' },
    toggleButton({ variant: 'outline', pressed: true }, 'Outline açık'),
    toggleButton({ variant: 'outline' }, 'Outline kapalı'),
  ),
  stack({ direction: 'row', gap: 'sm' },
    toggleButton({ variant: 'ghost', pressed: true }, 'Ghost açık'),
    toggleButton({ variant: 'ghost' }, 'Ghost kapalı'),
  ),
  stack({ direction: 'row', gap: 'sm' },
    toggleButton({ variant: 'soft', pressed: true }, 'Soft açık'),
    toggleButton({ variant: 'soft' }, 'Soft kapalı'),
  ),
)

Boyutlar

stack({ direction: 'row', gap: 'sm', align: 'center' },
  toggleButton({ size: 'sm', pressed: true }, 'Küçük'),
  toggleButton({ size: 'md', pressed: true }, 'Orta'),
  toggleButton({ size: 'lg', pressed: true }, 'Büyük'),
)

Simgelerle

Yalnızca simgeli bir geçişin erişilebilir bir ada ihtiyacı vardır — düğmeye düşen aria-label geçirin.

stack({ direction: 'row', gap: 'sm' },
  toggleButton({
    pressed: true,
    'aria-label': 'Kalın',
    title: 'Kalın',
    startIcon: icon('bold'),
  }),
  toggleButton({
    'aria-label': 'Eğik',
    title: 'Eğik',
    startIcon: icon('italic'),
  }),
)

Devre dışı

stack({ direction: 'row', gap: 'sm' },
  toggleButton({ pressed: true, disabled: true }, 'Açık, kilitli'),
  toggleButton({ disabled: true }, 'Kapalı, kilitli'),
)

Bir şey yaptırmak

Tek bir çağrı özniteliği çevirir; biçimlendirme onu izler. Tek seçimli bir toggleGroup() içinde kardeşlerini de bırakır.

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

Ya da zaten çalışan bir modülünüz varsa kendi modülünüzden:

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

setPressed('bold')

Proplar

Prop	Tür	Varsayılan	Açıklama
`pressed`	`boolean`	`false`	aria-pressed ayarlar. Sonrasında onu setPressed() değiştirir.
`variant`	`'outline' \| 'ghost' \| 'soft'`	`'outline'`	Basılı olmayan düğmenin görünüşü.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	button() ile aynı ölçek.
`disabled`	`boolean`	`false`	Düğmeyi devre dışı bırakır.

Geri kalan her şey button() işlevine düşer — startIcon, endIcon, onclick ve gerisi. Bunlardan bir küme için bkz. toggleGroup().