Tree Item
Tree Item (wje-tree-item) element predstavuje jednotlivú položku v rámci Tree komponentu. Môže obsahovať text, ikony alebo ďalšie vnorené položky, čím umožňuje vytvárať hierarchické štruktúry.
Pre viac informácií o použití Tree item sa presuňte do dokumentácie elementu Tree.
Presúvanie a štýlovanie
Ak rodičovský wje-tree používa atribút reorder, obsah priamo vložený do slotu start sa použije ako drag handle.
Samotný wje-tree-item potom zobrazuje drop stav cez interné triedy stromu a pseudo-elementy riadku, bez potreby
data-* atribútov.
Farby, border a drop indikátory sa nastavujú cez theme tokeny. Default hodnoty sú v light.css; dark.css mení iba
farebné tokeny. Na lokálne prispôsobenie možno použiť napr. --wje-tree-item-drop-color,
--wje-tree-item-border-radius, --wje-tree-item-border-width, --wje-tree-item-drop-line-width alebo
--wje-tree-item-drop-border-radius.
Kedy použiť
Použite wje-tree-item, keď používateľ potrebuje orientáciu v aplikácii alebo prechod medzi stavmi/obrazovkami.
Kedy nepoužiť
Nepoužívajte viac paralelných navigačných vzorov, ktoré si navzájom konkurujú.
Prístupnosť
Zabezpečte jasné active/selected stavy, predvídateľné poradie tabulátora a pomenovanie ovládacích prvkov.
Odporúčané postupy
- Držte URL a UI stav v synchronizácii, aby bola navigácia reprodukovateľná.
- Používajte konzistentné názvoslovie položiek naprieč menu, breadcrumbom a tabmi.
- Pri hlbokých štruktúrach pridajte pomocný kontext (breadcrumb, nadpis, ikony).
- Pri 3+ úrovniach vnorenia dolaďte odsadenie cez
--wje-tree-item-indent, aby boli úrovne vizuálne jednoznačné.