LivaSelectBox
DevExtreme'in SelectBox bileşeni üzerine kurulu; variant, size, label,
hint ve errorMessage prop'larıyla genişletilmiş bir açılır seçim kutusu.
import { LivaSelectBox } from "@dataliva/livalib";
Temel kullanım
Dizi tabanlı dataSource ile birlikte displayExpr görünen metni,
valueExpr seçilen değeri belirler.
Kontrollü seçim
value ve onValueChanged ile bileşen React state'ine bağlanır.
Arama
Arama her zaman açıktır: kutuya yazdıkça liste içerir (contains)
eşleşmesiyle süzülür, yazmadan açıldığında tüm kayıtlar listelenir. Bileşen
searchEnabled ve searchMode değerlerini kendisi belirlediği için bu iki prop
dışarıdan değiştirilemez. showClearButton seçimi temizleme düğmesini ekler.
Boyutlar
size kutunun yüksekliğini belirler: xxs 22px, xs 26px (varsayılan),
sm 29px, md 32px, lg 38px, xl 44px. Eski small / medium / large
değerleri sm / md / lg karşılığına çevrilir. Aynı ölçeği
LivaDropdownBox da kullanır.
Durumlar
disabled bileşeni kapatır; required etiketin yanına yıldız ekler,
errorMessage alanın altında hata metni gösterir.
| Prop | Tip | Varsayılan |
|---|---|---|
dataSource | any[] | { loadUrl, key?, pageSize?, paginate? } | — |
value | any | — |
displayExpr | string | — |
valueExpr | string | — |
onValueChanged | (e) => void | — |
placeholder | string | — |
label | string | — |
labelPosition | LabelPosition | 'top-start' |
labelWidth | number | string | — |
variant | 'standard' | 'outlined' | 'filled' | 'standard' |
size | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'small' | 'medium' | 'large' | 'xs' |
disabled | boolean | false |
required | boolean | false |
hint | string | — |
errorMessage | string | — |
labelWidth yalnızca labelPosition 'start' ya da 'end' iken uygulanır.
Ayrıca DevExtreme ISelectBoxOptions'tan gelen tüm prop'lar (ör.
showClearButton, width, itemRender).