LivaNavbar

LivaLayout kenar çubuğunun içinde kullanılan hiyerarşik gezinme menüsü. Bağımsız olarak da kullanılabilir; bu durumda açık grupların durumu zorunlu expandedKeys (Set<string>) ve onToggleExpand prop'larıyla üst bileşen tarafından kontrol edilir.

import { LivaNavbar } from "@dataliva/livalib";

Temel kullanım

Öğeler varsayılan olarak ağaç (dataStructure="tree") yapısındadır: her öğe id, text, isteğe bağlı href, icon ve alt öğeler için items alanı taşır. currentPathname ile eşleşen href aktif olarak vurgulanır. Grup başlığına tıklanınca onToggleExpand hesaplanan anahtarla çağrılır; anahtar üst düzey öğelerde id değeridir, iç içe gruplarda üstAnahtar/id biçiminde birleştirilir.

Akordeon davranışı

menuMode="accordion" görünümü akordeon stiline geçirir. Genişleme durumu kontrollü olduğu için "aynı anda tek grup açık" kuralı, onToggleExpand içinde kümenin yalnızca tıklanan anahtarla değiştirilmesiyle sağlanır.

Flyout alt menü

submenuMode="flyout" iç içe grupları yerinde aşağı açmak yerine menünün sağında yüzen bir panel olarak açar. Bu yalnızca alt öğelerinin tamamı yaprak olan iç gruplar için geçerlidir: üst düzey gruplar ve içinde başka grup barındıran dallar yine yerinde açılır. Varsayılan 'inline''dır; bu kipte her grup yerinde açılır.

Flyout'a dönüşen grup satırının sonunda sağa bakan bir ok görünür. Panel fareyle satırın üzerine gelince ya da satıra tıklanınca açılır ve başında grubun adını gösterir. Satırdan ayrılan imlecin panele ulaşabilmesi için kısa bir kapanma gecikmesi vardır. Sağda yer yoksa panel sola açılır, ekranın altına taşacaksa yukarı kaydırılır. Escape, panel dışına tıklama, sayfanın kaydırılması, pencere boyutunun değişmesi, bir öğeye tıklanması ve currentPathname'in değişmesi paneli kapatır.

Panelin açık/kapalı durumu bileşenin içinde tutulur: flyout gruplarında onToggleExpand çağrılmaz, expandedKeys de bu grupları etkilemez. onItemClick, onItemContextMenu ve aktif öğe vurgusu paneldeki öğelerde de aynı şekilde çalışır; aktif öğe paneldeyse grup satırı da vurgulanır. menuMode ile birlikte kullanılabilir.

Aşağıdaki örnekte "Maliyet" üst düzey grup olduğu için yerinde açılır; altındaki "Giderler" ve "Raporlar" ise panel olarak açılır.

LivaNavItem alanları: id, text, href?, icon? (CSS sınıfı, ör. dx-icon dx-icon-home), expanded?, tooltip? ve items?. onItemClick verildiğinde bağlantı tıklamalarında varsayılan gezinme engellenir.

submenuMode="flyout" yalnızca alt öğelerinin hepsi yaprak olan iç grupları etkiler; üst düzey gruplar her iki kipte de yerinde açılır. spotlightEnabled menünün üstüne bir arama kutusu (Ctrl+K) ekler; aranacak komutlar spotlightActions ile verilir.