SearchInput

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

SearchInput.tsx

Storybook

SearchInput · Playground

SearchInput, @bigbang/ui paketindedir.

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

<SearchInput label="Ara" hideLabel placeholder="Ada göre ara" loading={fetching} onSearch={setQuery} />;

Özellikler

labelZorunlu

Açıklama

Aramanın adı; <label> ile alana bağlanır. hideLabel gizlese de zorunludur.

Tür

string

hideLabel

Açıklama

Etiketi görsel olarak gizler; ekran okuyucu yine okur. Yalnızca aramanın yerinden belli olduğu yerlerde, ör. bir listenin üstünde kullanın.

Tür

boolean

Varsayılan

false

description

Açıklama

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

Tür

ReactNode

value

Açıklama

Kontrollü sorgu. onValueChange ile birlikte verin.

Tür

string

defaultValue

Açıklama

Kontrolsüz alanın ilk sorgusu.

Tür

string

onValueChange

Açıklama

Her değişiklikte, temizlemede de ('' ile) çağrılır.

Tür

(value: string) => void

onSearch

Açıklama

Kullanıcı debounceMs kadar durunca, temizlenince hemen çağrılır. Yazarken arama için kullanın.

Tür

(query: string) => void

debounceMs

Açıklama

onSearch çalışmadan önceki bekleme, milisaniye.

Tür

number

Varsayılan

300

onSubmit

Açıklama

Kullanıcı Enter tuşuna basınca sorguyla çağrılır.

Tür

(query: string) => void

loading

Açıklama

Sonuçlar yüklenirken arama ikonunun yerine dönen halka gösterir ve bunu bir kez duyurur. Alan düzenlenebilir kalır.

Tür

boolean

Varsayılan

false

loadingLabel

Açıklama

loading başlayınca bir kez okunan metin. Verilmezse ui.search.loading okunur ('Aranıyor' ya da 'Searching').

Tür

string

landmark

Açıklama

Alanı role='search' bölgesine sarar. Sayfanın ana araması için, sayfada bir kez kullanın.

Tür

boolean

Varsayılan

false

placeholder

Açıklama

Alan boşken görünen metin: neyin aranabileceğini söyleyin ('Ada göre ara'). Etiketin yerini tutmaz.

Tür

string

size

Açıklama

Alan yüksekliği: 32, 36 ve 40 px.

Tür

'sm' | 'md' | 'lg'

Varsayılan

'md'

disabled

Açıklama

Alanı ve etiketini devre dışı bırakır.

Tür

boolean

Varsayılan

false

name

Açıklama

Form gönderildiğinde kullanılan alan adı.

Tür

string

className

Açıklama

Kök öğeye eklenir; yalnızca yerleşim için kullanın.

Tür

string

Veri öznitelikleri

• data-component="search-input": kök öğe üzerinde.
• data-part: label, box, icon ya da spinner, control, clear, description.