Switch

Kurulum

Paket

@bigbang/ui

İçe aktarma

import { Switch } from '@bigbang/ui';

Kaynak

Switch.tsx

Storybook

Switch · Playground

Switch, @bigbang/ui paketindedir.

import { Switch } from '@bigbang/ui';

<Switch label="Seçenek etiketi" checked={checked} loading={saving} onCheckedChange={save} />;

Özellikler

labelZorunlu

Açıklama

Rayın yanındaki görünür metin; anahtarı adlandırır, tıklamak anahtarı değiştirir.

Tür

ReactNode

description

Açıklama

Etiketin altındaki yardım metni; aria-describedby ile bağlanır.

Tür

ReactNode

checked

Açıklama

Kontrollü açık durum. onCheckedChange ile birlikte verin.

Tür

boolean

defaultChecked

Açıklama

Kontrolsüz kullanımda ilk çizimdeki açık durum.

Tür

boolean

Varsayılan

false

onCheckedChange

Açıklama

Kullanıcı anahtarı değiştirince yeni durumla çağrılır. Ayarı hemen uygulayın.

Tür

(checked: boolean) => void

loading

Açıklama

Değişiklik kaydedilirken başparmakta dönen halka gösterir ve değişiklikleri yok sayar. Anahtar odaklanabilir kalır ve aria-busy bildirir.

Tür

boolean

Varsayılan

false

loadingLabel

Açıklama

loading başladığında bir kez duyurulan metin. Verilmezse ui.spinner.loading kütüphane metni duyurulur ("Yükleniyor" ya da "Loading").

Tür

string

disabled

Açıklama

Etkileşimi kapatır; anahtarı ve etiketini soluklaştırır.

Tür

boolean

Varsayılan

false

size

Açıklama

Ray boyutu: 32 × 18 px ya da tablo hücresi gibi yoğun satırlar için 24 × 14 px.

Tür

'sm' | 'md'

Varsayılan

'md'

name

Açıklama

Form gönderiminde kullanılan alan adı.

Tür

string

className

Açıklama

Yalnızca yerleşim için: dış boşluk ve konum.

Tür

string

Veri öznitelikleri

• data-component="switch": kök öğe üzerinde.
• data-part: track, thumb, label, description.
• data-loading: kayıt sürerken rayda. data-checked, data-unchecked, data-disabled: rayda ve başparmakta, Base UI’dan.