LivaDrawer
DevExtreme Drawer üzerine kurulu kayar panel bileşeni. drawerContent
panelin içeriğini, children ise ana içeriği tanımlar. Görünürlük
visible + onVisibilityChange ile kontrollü yönetilir.
import { LivaDrawer } from "@dataliva/livalib";
Temel kullanım
Varsayılan variant="overlay" panelde içeriğin üzerine açılır. Aşağıdaki
örnek, sınırlı yükseklikteki bir kapsayıcı içinde çalışır; panel butonla
açılıp kapatılır.
Not: children ilk render'da sabitlenir (performans için memoize edilir);
bu yüzden ana içerikteki durum güncellemelerinde fonksiyonel setState
kullanın.
Push varyantı
variant="push" panel açılırken ana içeriği iter; variant="shrink" ise
içerik alanını daraltır. position ile panelin açılacağı kenar, size
ile genişliği (hazır boyut adı ya da piksel) belirlenir.
| Prop | Tip | Varsayılan |
|---|---|---|
visible | boolean | false |
onVisibilityChange | (visible: boolean) => void | — |
variant | 'overlay' | 'push' | 'shrink' | 'overlay' |
size | 'small' | 'medium' | 'large' | number | 'medium' |
minSize | number | 0 |
height | number | string | '100%' |
position | 'left' | 'right' | 'top' | 'bottom' | 'left' |
drawerContent | ReactNode | — (zorunlu) |
children | ReactNode | — (zorunlu) |
drawerContentClassName | string | '' |
contentClassName | string | '' |
className | string | '' |
Hazır boyutlar piksel karşılıkları: small 250, medium 300, large 400.
Ayrıca DevExtreme IDrawerOptions'tan gelen diğer prop'lar (ör. shading,
closeOnOutsideClick) aynen aktarılır.