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.
| Prop | Tip | Varsayılan |
|---|---|---|
items | LivaNavItem[] | [] |
expandedKeys | Set<string> | — (zorunlu) |
onToggleExpand | (key: string) => void | — (zorunlu) |
currentPathname | string | — |
onItemClick | (item: LivaNavItem) => void | — |
onItemContextMenu | (item, event) => void | — |
menuMode | 'standard' | 'accordion' | 'standard' |
dataStructure | 'plain' | 'tree' | 'tree' |
keyExpr | string | 'id' |
parentIdExpr | string | 'parentId' |
displayExpr | string | 'text' |
itemsExpr | string | 'items' |
iconExpr | string | 'icon' |
hrefExpr | string | 'href' |
spotlightEnabled | boolean | false |
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.