LivaResponsiveBox
DevExtreme'in ResponsiveBox bileşeni üzerine kurulu, satır/sütun oranlarıyla
çalışan duyarlı yerleşim container'ı. Izgara LivaResponsiveBoxRow ve
LivaResponsiveBoxCol ile tanımlanır; her LivaResponsiveBoxItem,
LivaResponsiveBoxLocation aracılığıyla ızgaradaki hücresine yerleştirilir.
import {
LivaResponsiveBox,
LivaResponsiveBoxRow,
LivaResponsiveBoxCol,
LivaResponsiveBoxItem,
LivaResponsiveBoxLocation,
} from "@dataliva/livalib";
Sayfa Düzeni
Üst bilgi ve alt bilgi colspan={2} ile iki sütuna yayılır; orta satır menü
ve içerik olarak 1:3 oranında bölünür.
Klasik sayfa düzeni
Önizleme yükleniyor…
Oranlar
Satır ve sütunların ratio değerleri, kullanılabilir alanın hangi oranda
paylaşılacağını belirler.
Oranlı sütunlar (1 : 2 : 1)
Önizleme yükleniyor…
| Prop | Tip | Varsayılan |
|---|---|---|
rows | Row[] | — |
cols | Col[] | — |
dataSource | Array | DataSource | — |
items | Item[] | — |
screenByWidth | (width: number) => string | — |
singleColumnScreen | string | '' |
height | number | string | — |
width | number | string | — |
onItemClick | (e) => void | — |
className | string | '' |
children | React.ReactNode | — |
Ayrıca DevExtreme IResponsiveBoxOptions'tan gelen tüm prop'lar kullanılabilir.
LivaResponsiveBoxRow / LivaResponsiveBoxCol
| Prop | Tip | Varsayılan |
|---|---|---|
ratio | number | 1 |
baseSize | number | 0 |
shrink | number | 1 |
screen | string | — |
LivaResponsiveBoxItem
| Prop | Tip | Varsayılan |
|---|---|---|
location | Location | Location[] | — |
template | any | — |
visible | boolean | true |
children | React.ReactNode | — |
LivaResponsiveBoxLocation
| Prop | Tip | Varsayılan |
|---|---|---|
row | number | — |
col | number | — |
colspan | number | — |
rowspan | number | — |
screen | string | — |