LivaSplitter
DevExtreme'in Splitter bileşeni üzerine kurulu, kullanıcı tarafından
sürüklenerek yeniden boyutlandırılabilen panel container'ı. Paneller
LivaSplitterItem ile tanımlanır; her panele başlangıç boyutu, minimum boyut
ve daraltılabilirlik verilebilir. Splitter'lar iç içe kullanılarak karma
yerleşimler oluşturulabilir.
import { LivaSplitter, LivaSplitterItem } from "@dataliva/livalib";
Temel Kullanım
size panelin başlangıç boyutunu, minSize sürükleme sırasındaki alt sınırı
belirler. collapsible verilen panel, ayıraç üzerindeki ok ile tamamen
daraltılabilir.
Temel kullanım — yeniden boyutlandırılabilir iki panel
Önizleme yükleniyor…
İç İçe Bölmeler
Bir LivaSplitterItem içine ikinci bir LivaSplitter yerleştirilerek
yatay + dikey karma düzenler kurulur. orientation="vertical" panelleri
alt alta böler.
İç içe bölmeler — dikey yönelim
Önizleme yükleniyor…
| Prop | Tip | Varsayılan |
|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' |
allowKeyboardNavigation | boolean | true |
separatorSize | number | 8 |
dataSource | Array | DataSource | — |
items | Item[] | — |
height | number | string | — |
width | number | string | — |
onResizeStart | (e) => void | — |
onResize | (e) => void | — |
onResizeEnd | (e) => void | — |
onItemCollapsed | (e) => void | — |
onItemExpanded | (e) => void | — |
className | string | '' |
children | React.ReactNode | — |
Ayrıca DevExtreme ISplitterOptions'tan gelen tüm prop'lar kullanılabilir.
LivaSplitterItem
| Prop | Tip | Varsayılan |
|---|---|---|
size | number | string | — |
minSize | number | string | — |
maxSize | number | string | — |
resizable | boolean | true |
collapsible | boolean | false |
collapsed | boolean | false |
visible | boolean | true |
children | React.ReactNode | — |