LivaLayout
Uygulamanın genel iskeletini kuran yerleşim bileşeni: üst bar (header), daraltılabilir kenar çubuğu (sidebar), alt bilgi (footer) ve ana içerik alanını tek bileşende toplar. Kenar çubuğunda gezinme menüsü, kullanıcı kartı ve isteğe bağlı spotlight araması bulunur.
import { LivaLayout } from "@dataliva/livalib";
Tam yerleşim
navigationItems ile gezinme ağacı, user ile kullanıcı kartı ve
footerText ile alt bilgi tanımlanır. currentPathname verilen öğe menüde
aktif olarak vurgulanır. Bileşen normalde height="100vh" ile tüm ekranı
kaplar; aşağıdaki önizlemede sınırlı yükseklikteki bir kapsayıcı içinde
height="100%" ile gösterilmektedir.
Her gezinme öğesinde items alanı zorunludur; alt öğesi olmayanlar için
boş dizi verilir. icon alanı bir CSS sınıfı bekler (ör. DevExtreme
ikonları için dx-icon dx-icon-home).
Sade yerleşim
showSidebar, showFooter ve showUserCard ile bölümler tek tek
kapatılabilir. headerRightElement üst barın sağına özel içerik yerleştirir.
| Prop | Tip | Varsayılan |
|---|---|---|
showHeader | boolean | true |
showSidebar | boolean | true |
showFooter | boolean | true |
headerTitle | ReactNode | '' |
headerRightElement | ReactNode | — |
logoText / logoIcon | ReactNode | — |
showUserCard | boolean | true |
user | { FullName: string | null; Role?: string | null } | — |
navigationItems | NavigationItem[] | — |
currentPathname | string | window.location.pathname |
sidebarWidth | number | string | 330 |
sidebarCollapsed | boolean | false |
sidebarPosition | 'left' | 'right' | 'left' |
menuMode | 'standard' | 'accordion' | 'standard' |
layoutPosition | 'side' | 'header' | 'side' |
sidebarHeaderElement | ReactNode | — |
sidebarFooterElement | ReactNode | — |
height | number | string | '100vh' |
layoutPosition="header" menüyü kenar çubuğu yerine üst bara taşır. Bu kipte
yerleşik başlık her zaman çizilir (menüyü o barındırır), bu yüzden verilen
headerElement yok sayılır.
sidebarHeaderElement kenar çubuğunun en üstüne, navigasyon ve aramanın
üzerine yerleşir ve yalnızca çubuk açıkken görünür. sidebarFooterElement ise
kullanıcı kartının üstünde durur ve hem açık hem daraltılmış durumda çizilir.
Ayrıca footerText, withBorders (varsayılan true), layoutPadding
(varsayılan 24), onNavigationItemClick, onSidebarToggle,
spotlightEnabled ve sidebarFooterItems gibi prop'lar da desteklenir.
NavigationItem şu alanlardan oluşur: id, text, href?, icon?,
expanded? ve zorunlu items dizisi.