LivaDocsv1.1.2

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).

Tam yerleşim (header + sidebar + footer)
Önizleme yükleniyor…

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.

Sade yerleşim (yalnızca üst bar)
Önizleme yükleniyor…

Alt menü açılış şekli

submenuMode kenar çubuğundaki menüye aktarılır. Varsayılan 'inline' kipinde her grup yerinde aşağı açılır. 'flyout' verildiğinde alt öğelerinin tamamı yaprak olan iç gruplar, kenar çubuğunun sağında yüzen bir panel olarak açılır; üst düzey gruplar ve içinde başka grup barındıran dallar yine yerinde açılır. Davranışın ayrıntıları ve canlı örnek için LivaNavbar → Flyout alt menü bölümüne bakın.

<LivaLayout
  navigationItems={navigationItems}
  menuMode="accordion"
  submenuMode="flyout"
>
  {children}
</LivaLayout>

Bu ayar yalnızca kenar çubuğu menüsünü etkiler. Üst menü (layoutPosition="header") iç grupları her zaman yana açılan panellerle gösterir.

Üst menü yerleşimi

layoutPosition="header" menüyü kenar çubuğundan alıp üst bara yatay bir menü olarak taşır. Masaüstünde kenar çubuğu hiç çizilmez ve içerik tüm genişliği kullanır. Menü aynı navigationItems ağacından beslenir:

  • Üst düzey öğeler barda düğme olarak durur. Alt öğesi olan bir başlığa tıklanınca altında bir panel açılır; panel açıkken başka bir başlığın üzerine gelmek doğrudan o başlığın paneline geçer. Escape, panel dışına tıklama ve currentPathname'in değişmesi paneli kapatır.
  • Daha derin gruplar, panelin içinde üzerine gelince yana doğru açılır. İmleç açık alt menüye çapraz giderken yol üstünde değdiği satırlar o alt menüyü kapatmaz.
  • Bara sığmayan başlıklar sağdaki taşma düğmesinin ("Daha fazla") paneline geçer. Pencerenin sağ kenarından taşacak bir panel düğmenin sağ kenarına hizalanır ve alt menülerini sola doğru açar.
  • logoIcon ve logoText birlikte verildiyse yer daraldığında önce logoText gizlenir, logoIcon her zaman kalır. Başlıkların taşma düğmesine geçmesi en son çaredir.
  • Kenar çubuğuna ait içerikler üst barın sağ bölümüne taşınır. Bu bölüm soldan sağa arama simgesi (spotlightEnabled), sidebarHeaderElement, sidebarFooterElement, sidebarFooterItems (simge düğmeleri; alt öğesi olanlar açılır pencereyle), headerRightElement ve kompakt kullanıcı kartından oluşur.
  • onNavigationItemContextMenu ile bir alt menü öğesinde bağlam menüsü açıldığında, öğeyi barındıran alt menü bağlam menüsü kapanana kadar açık kalır.

Bu kipte yerleşik üst bar her zaman çizilir; headerElement ve headerTitle kullanılmaz. Küçük ekranlarda (768px altı) menü barı çizilmez; showSidebar açıksa menü, hamburger düğmesiyle açılan kenar çubuğu çekmecesinde yer alır.

Üst menü (layoutPosition="header")
Önizleme yükleniyor…

Kullanıcı Erişilebilirlik ayarlarından bir menü yeri (menuPosition: side veya header) seçtiyse bu tercih layoutPosition prop'unu ezer; auto seçiliyken prop geçerlidir. LivaLayout tercihi kendisi okur, uygulamanın ek bir şey yapması gerekmez.