Bileşenler

Combobox

Yazarak daraltılan listeden bir ya da birden çok seçim; sunucu sonuçları ve yeni seçenek ekleme destekli.

Storybook: Storybook
Kaynak kod: Kaynak kod

Kurulum

Paket: @bigbang/ui
İçe aktarma: import { Combobox } from '@bigbang/ui';
Kaynak: Combobox.tsx
Storybook: Combobox · Playground

Combobox @bigbang/ui paketindedir. Seçenek tipi ComboboxItem olarak dışa aktarılır.

import { Combobox, type ComboboxItem } from '@bigbang/ui';

<Combobox label="Şehir" items={items} value={city} onValueChange={setCity} />;

<Combobox multiple label="Şehir" items={items} value={cities} onValueChange={setCities} />;

Özellikler

multiple

Açıklama: Birden çok seçime izin verir; seçimler alanda kaldırılabilir çipler olarak görünür.
Tür: boolean
Varsayılan: false

value

Açıklama: Denetlediğinizde seçili değer: tek seçimde string ya da null, multiple ile string[]. onValueChange ile kullanın.
Tür: string | readonly string[] | null

defaultValue

Açıklama: Denetlemediğinizde ilk çizimdeki seçili değer.
Tür: string | readonly string[] | null

onValueChange

Açıklama: Kullanıcı seçtiğinde ya da temizlediğinde yeni değerle çağrılır.
Tür: ((value: string | null) => void) | ((value: string[]) => void)

labelZorunlu

Açıklama: Girişe bağlı görünür etiket. Yer tutucu onun yerini tutmaz.
Tür: string

itemsZorunlu

Açıklama: Seçenekler. Sunucu sonuçları için o anki sonuç sayfasını verin ve filter değerini false yapın.
Tür: readonly ComboboxItem[] | readonly ComboboxItemGroup[]

placeholder

Açıklama: Boş girişteki metin, örneğin "Ara".
Tür: string

description

Açıklama: Alanın altındaki yardım metni; hatadan önce aria-describedby ile bağlanır.
Tür: ReactNode

error

Açıklama: Verildiğinde alan geçersizdir ve ileti girişle birlikte okunur.
Tür: string

required

Açıklama: Seçim zorunludur: etikete görünmeyen "zorunlu" ile * eklenir.
Tür: boolean
Varsayılan: false

disabled

Açıklama: Alanı ve etiketini devre dışı bırakır; değer gönderilmez.
Tür: boolean
Varsayılan: false

size

Açıklama: Alan yüksekliği: TextInput gibi 32, 36 ya da 40 px. multiple ile çipler satır atladıkça alan büyür.
Tür: 'sm' | 'md' | 'lg'
Varsayılan: 'md'

name

Açıklama: Form gönderilirken kullanılan alan adı.
Tür: string

filter

Açıklama: items öğelerini yazılan metne göre, Provider dilinde büyük-küçük harf gözetmeden süzer. Sunucu süzüyorsa false verin.
Tür: boolean
Varsayılan: true

onInputValueChange

Açıklama: Yazılan metinle çağrılır; sunucu sonuçlarını yüklemek için kullanın.
Tür: (text: string) => void

loading

Açıklama: Sunucu sonuçları yüklenirken listede yükleniyor satırı gösterir ve duyurur.
Tür: boolean
Varsayılan: false

onCreate

Açıklama: Listede olmayan bir seçeneğin eklenmesini sağlar: metin hiçbir etiketle eşleşmeyince "… ekle" satırı çıkar. Yeni öğeyi döndürün; hemen seçilir. Listede kalması için items'a da ekleyin.
Tür: (label: string) => ComboboxItem

showClear

Açıklama: Değer varken temizleme düğmesini gösterir; düğme açma okunun yerini alır.
Tür: boolean
Varsayılan: false

emptyText

Açıklama: Hiçbir şey eşleşmediğindeki metin. Varsayılanı Provider'dan "Sonuç bulunamadı" ya da "No results".
Tür: string

className

Açıklama: Kök öğeye eklenir; yalnızca yerleşim için kullanın.
Tür: string

material

Açıklama: 'solid', cam bir Provider altında listeyi opak tutar. Alanın kendisi her zaman opaktır.
Tür: 'auto' | 'solid'
Varsayılan: 'auto'

ComboboxItem: value, label, isteğe bağlı icon ve disabled. value, defaultValue ve onValueChange tek seçimde string | null, multiple ile string[] kullanır.

Veri öznitelikleri

data-component="combobox": kökte (Field).
data-part="control", "chip", "clear", "trigger", "popup", "item": parçalarda.
data-popup-open, data-highlighted, data-selected: Base UI durumları.
data-part: group, group-label (gruplu items ile). ComboboxItemGroup tipi dışa açılır.