Toggle

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

Toggle.tsx

Storybook

Toggle · Playground

Toggle, @bigbang/ui paketindedir.

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

<Toggle icon="bold" label="Kalın" />;
<Toggle pressed={pressed} onPressedChange={setPressed}>Öğe</Toggle>;

Özellikler

children

Açıklama

Görünür metin. Verildiğinde düğmeyi metin adlandırır; label isteğe bağlıdır.

Tür

ReactNode

label

Açıklama

Erişilebilir ad. Yalnızca ikon taşıyan düğmede zorunludur; metin varsa onun yerine geçer.

Tür

string

icon

Açıklama

Kayıtlı ikon adı; metinden önce ya da tek başına gösterilir.

Tür

IconName

pressed

Açıklama

Kontrollü basılı durum. onPressedChange ile birlikte verin.

Tür

boolean

defaultPressed

Açıklama

Kontrolsüz kullanımda ilk çizimdeki basılı durum.

Tür

boolean

Varsayılan

false

onPressedChange

Açıklama

Kullanıcı düğmeyi değiştirdiğinde yeni basılı durumla çağrılır.

Tür

(pressed: boolean) => void

value

Açıklama

ToggleGroup içindeki öğenin değeri. Grupta zorunludur; grup dışında yok sayılır.

Tür

string

variant

Açıklama

tertiary basılana kadar kenarlık taşımaz ve araç çubukları içindir; secondary iki durumda da kenarlıklıdır.

Tür

'tertiary' | 'secondary'

Varsayılan

'tertiary'

size

Açıklama

Button yükseklikleriyle aynı 32, 36 ya da 40 px yükseklik.

Tür

'sm' | 'md' | 'lg'

Varsayılan

'md'

disabled

Açıklama

Etkileşimi kapatır ve düğmeyi sekme sırasından çıkarır.

Tür

boolean

Varsayılan

false

className

Açıklama

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

Tür

string

Veri öznitelikleri

• data-component="toggle": kök <button> üzerinde.
• data-pressed: basılıyken, Base UI’dan gelir.
• data-disabled: devre dışıyken.