SegmentedControl

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

SegmentedControl.tsx

Storybook

SegmentedControl · Playground

SegmentedControl, @bigbang/ui paketindedir. Seçenek tipi SegmentedControlItem olarak dışa aktarılır.

import { SegmentedControl, type SegmentedControlItem } from '@bigbang/ui';

const items: SegmentedControlItem[] = [
  { value: 'day', label: 'Günlük' },
  { value: 'week', label: 'Haftalık' },
];

<SegmentedControl label="Dönem" items={items} value={period} onValueChange={setPeriod} />;

Özellikler

labelZorunlu

Açıklama

Ekran okuyucu için grubun adı, örneğin "Görünüm". Zorunludur; seçenekler tek başına neyi seçtiğini söylemez.

Tür

string

itemsZorunlu

Açıklama

Birbirini dışlayan iki ile beş seçenek.

Tür

readonly SegmentedControlItem[]

value

Açıklama

Kontrollü kullanımda seçili değer. onValueChange ile birlikte verin.

Tür

string

defaultValue

Açıklama

Kontrolsüz kullanımda ilk çizimde seçili değer.

Tür

string

onValueChange

Açıklama

Yeni seçilen değerle çağrılır.

Tür

(value: string) => void

size

Açıklama

Seçenek yüksekliği: 32 ya da 36 px.

Tür

'sm' | 'md'

Varsayılan

'md'

fullWidth

Açıklama

Denetimi kapsayıcısına yayar ve genişliği seçenekler arasında eşit böler.

Tür

boolean

Varsayılan

false

disabled

Açıklama

Tüm seçenekleri devre dışı bırakır.

Tür

boolean

Varsayılan

false

name

Açıklama

Denetim bir formun içindeyse kullanılan alan adı.

Tür

string

material

Açıklama

'solid', cam bir Provider altında rayı opak tutar.

Tür

'auto' | 'solid'

Varsayılan

'auto'

className

Açıklama

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

Tür

string

SegmentedControlItem: value, label, isteğe bağlı icon ve disabled.

Veri öznitelikleri

• data-component="segmented-control": kökte.
• data-part="thumb" ve hazır olduğunda data-ready: kayan dolguda.
• data-checked, data-unchecked, data-disabled: seçeneklerde (Base UI).