Anahtar

Anahtar, çevrilir çevrilmez uygulanan bir ayar içindir. Onay kutusu ise sonradan bir gönder düğmesiyle onayladığınız bir seçim içindir. Denetiminiz altında Kaydet bulunan bir formda duruyorsa o bir onay kutusudur.

Bileşenin adı sıkıcı ama kaçınılmaz bir nedenle switch() değil toggle(): switch ayrılmış bir sözcüktür, dolayısıyla bir içe aktarma bağı olamaz. Altında role="switch" taşıyan gerçek bir <input type="checkbox"> vardır.

Temel anahtar

stack({ direction: 'row', gap: 'lg' },
  toggle({ label: 'Herkese açık site', name: 'public' }),
  toggle({ label: 'Açık', name: 'on', checked: true }),
)

Renkler

stack({ direction: 'row', gap: 'lg', wrap: true },
  toggle({ label: 'Primary', checked: true, color: 'primary' }),
  toggle({ label: 'Neutral', checked: true, color: 'neutral' }),
  toggle({ label: 'Success', checked: true, color: 'success' }),
  toggle({ label: 'Warning', checked: true, color: 'warning' }),
  toggle({ label: 'Danger', checked: true, color: 'danger' }),
)

Devre dışı

stack({ direction: 'row', gap: 'lg' },
  toggle({ label: 'Kapalı ve kilitli', disabled: true }),
  toggle({ label: 'Açık ve kilitli', checked: true, disabled: true }),
)

Etiketsiz

Görünür etiketi olmayan bir anahtarın yine de erişilebilir bir ada ihtiyacı vardır. aria-label geçirin — girdiye düşer.

toggle({ 'aria-label': 'Pagefind aramasını aç', checked: true })

Bir ayarlar listesi

Alışıldık biçim: solda etiket, sağda anahtar, ayar başına bir satır.

  • Pagefind araması
    Derlemenin sonunda her sayfayı dizinler.
  • Görsel optimizasyonu
    Derleme sırasında görselleri yeniden boyutlandırır ve dönüştürür. sharp gerektirir.
  • Sunucu adaları
    İşaretli bölgeleri istek anında işler.
return list(
  [
    ['Pagefind araması', 'Derlemenin sonunda her sayfayı dizinler.', true],
    ['Görsel optimizasyonu', 'Derleme sırasında görselleri yeniden boyutlandırır ve dönüştürür. sharp gerektirir.', true],
    ['Sunucu adaları', 'İşaretli bölgeleri istek anında işler.', false],
  ].map(([name, description, on]) =>
    listItem({
      title: name,
      description,
      end: toggle({ 'aria-label': name, checked: on }),
    }),
  ),
)

Proplar

PropTürVarsayılanAçıklama
labelChild—Anahtarın yanındaki metin. Yoksa aria-label kullanın.
color'primary' | 'neutral' | 'success' | 'warning' | 'danger''primary'Açıkken pist rengi.
checkedbooleanfalseAçık başlayıp başlamayacağı.
namestring—Form alanı adı.
disabledbooleanfalseGirdiyi devre dışı bırakır ve satırı soluklaştırır.

Geri kalan her şey <input> öğesine düşer; onchange ve aria-* oraya aittir.