LivaTagBox
DevExtreme'in TagBox bileşeni üzerine kurulu çoklu seçim kutusu. Arama
(searchEnabled), onay kutulu liste (showSelectionControls) ve butonla
uygulama (applyValueMode="useButtons") varsayılan olarak açık gelir.
import { LivaTagBox } from "@dataliva/livalib";
Çoklu seçim
Dizi tabanlı dataSource ile birlikte displayExpr ve valueExpr
kullanılır; defaultValue başlangıç seçimini belirler.
Kontrollü değer
value ve onValueChanged ile seçilen değer dizisi React state'inde tutulur.
Seçim davranışı
applyValueMode="instantly" seçimleri butonsuz anında uygular;
showSelectionControls={false} onay kutularını gizler, hideSelectedItems
seçilenleri listeden çıkarır.
Satır başına etiket sayısı
Varsayılan durumda etiketler kendi metin genişliklerinde kalır ve satıra
sığdıkları kadar yan yana dizilir; satır başına düşen sayı adların uzunluğuna
göre değişir. tagsPerRow bir sayı aldığında her etiket satırın eşit bir payını
kaplar, taşan ad üç nokta ile kısalır ve dizilim ad uzunluğundan bağımsız olur.
Ayar panelleri ve form sütunları gibi dar, sabit genişlikli yerleşimlerde
kutunun etiket sayısıyla düzensiz büyümesini önler.
Arama açıkken (searchEnabled, varsayılan true) DevExtreme son etiketin
ardına esneyen bir metin kutusu bırakır ve bu kutu satırın kalanını doldurduğu
için dizilim kayabilir. Sabit dizilim için tagsPerRow'u
searchEnabled={false} ile birlikte kullanın.
Durumlar
| Prop | Tip | Varsayılan |
|---|---|---|
dataSource | any[] | { loadUrl, key?, pageSize?, paginate? } | — |
value | any[] | — |
defaultValue | any[] | — |
displayExpr | string | — |
valueExpr | string | — |
onValueChanged | (e) => void | — |
placeholder | string | — |
label | string | — |
labelPosition | 'start' | 'end' | 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | 'top-start' |
labelWidth | number | string | — |
required | boolean | false |
hint | string | — |
variant | 'standard' | 'outlined' | 'filled' | 'standard' |
size | 'small' | 'medium' | 'large' | 'medium' |
tagsPerRow | number | — |
searchEnabled | boolean | true |
showSelectionControls | boolean | true |
applyValueMode | 'useButtons' | 'instantly' | 'useButtons' |
disabled | boolean | false |
readOnly | boolean | false |
tagsPerRow yalnızca pozitif bir sayı verildiğinde uygulanır. labelWidth
yalnızca labelPosition 'start' ya da 'end' iken geçerlidir; required
etiketin yanına yıldız ekler, hint etiketin altında gösterilir.
Ayrıca DevExtreme ITagBoxOptions'tan gelen tüm prop'lar (ör.
maxDisplayedTags, hideSelectedItems, selectAllMode).