ToggleGroup

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

ToggleGroup.tsx

Storybook

ToggleGroup · Playground

ToggleGroup, @bigbang/ui paketindedir; öğeleri Toggle’dır.

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

<ToggleGroup label="Metin hizası" value={value} onValueChange={setValue}>
  <Toggle value="left" icon="align-left" label="Sola hizala" />
  <Toggle value="center" icon="align-center" label="Ortala" />
</ToggleGroup>;

Özellikler

labelZorunlu

Açıklama

Ekran okuyucu için grubun adı, örneğin "Metin hizası". Zorunludur; öğeler tek başına neyi ayarladığını söylemez.

Tür

string

value

Açıklama

Kontrollü kullanımda basılı öğelerin değerleri. onValueChange ile birlikte verin.

Tür

string[]

defaultValue

Açıklama

Kontrolsüz kullanımda ilk çizimde basılı öğelerin değerleri.

Tür

string[]

Varsayılan

[]

onValueChange

Açıklama

Her değişiklikten sonra basılı öğelerin değerleriyle çağrılır.

Tür

(value: string[]) => void

multiple

Açıklama

Birden çok öğenin basılı kalmasına izin verir (kalın, italik, altı çizili). Verilmezse bir öğeye basmak diğerlerini bırakır (metin hizası).

Tür

boolean

Varsayılan

false

orientation

Açıklama

Öğelerin ve odağı aralarında taşıyan ok tuşlarının yönü.

Tür

'horizontal' | 'vertical'

Varsayılan

'horizontal'

variant

Açıklama

Tüm öğelerin görünümü; öğenin kendi variant değeri önce gelir.

Tür

'tertiary' | 'secondary'

Varsayılan

'tertiary'

size

Açıklama

Tüm öğelerin boyutu; öğenin kendi size değeri önce gelir.

Tür

'sm' | 'md' | 'lg'

Varsayılan

'md'

disabled

Açıklama

Tüm öğeleri devre dışı bırakır.

Tür

boolean

Varsayılan

false

className

Açıklama

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

Tür

string

childrenZorunlu

Açıklama

Her biri value taşıyan Toggle bileşenleri.

Tür

ReactNode

Veri öznitelikleri

• data-component="toggle-group": kök öğe üzerinde.
• data-orientation: Base UI’dan gelir.
• data-disabled: disabled verildiğinde.