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' |
height | number | string | '100vh' |
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.