Tree

shadow

Element Tree umožňuje hierarchické zobrazovanie dát v stromovej štruktúre. Používa sa na vizualizáciu kategórií, súborových systémov alebo navigačných štruktúr. Tree obsahuje wje-tree ako hlavný kontajner a wje-tree-item ako jednotlivé položky stromu. Položky môžu obsahovať deti, čím vytvárajú vnorenú hierarchiu.

Základné použitie

Ukážka predstavuje základný strom s vnorenými uzlami, aby bolo jasné predvolené otváranie a hierarchia.

Slots

Ukážka používa sloty na doplnenie ikon alebo sekundárneho obsahu pri uzloch stromu.

Multiple

Ukážka povoľuje otvorenie viacerých vetiev stromu naraz, čo sa hodí pri porovnávaní vzdialenejších vetiev.

Odsadenie vnorení

Pre viac úrovní vnorenia (napr. Deciduous -> Maple -> Field maple) sa odsadenie aplikuje priebežne na každú otvorenú vetvu. Vďaka tomu je tretia a ďalšie úrovne čitateľne oddelené od rodiča.

TO DO complete tree and tree item docs

Kedy použiť

Použite wje-tree, 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).

Atribúty a vlastnosti

selection

Popis	Riadi správanie výberu položiek pre voľbu selection.
Atribút	selection
Typ	string
Predvolené	single

Udalosti

Pre tento komponent nie sú dostupné žiadne udalosti.

Metódy

getAllItems

Popis	Vráti všetky položky z aktuálneho stavu komponentu.
Signatúra	() => Array<Element>

getExpandCollapseIcon

Popis	Vráti expand collapse ikonu z aktuálneho stavu komponentu.
Signatúra	(item: HTMLElement, status: string) => void

getSlots

Popis	Vráti slots z aktuálneho stavu komponentu.
Signatúra	(item: any, slotName: any) => void

updateCheckboxState

Popis	Aktualizuje checkbox state podľa najnovších údajov komponentu.
Signatúra	(changedItem: object, isInitialSync?: boolean) => void

updateParentState

Popis	Aktualizuje parent state podľa najnovších údajov komponentu.
Signatúra	(item: object) => void

propagateStateUpwards

Popis	Spustí metódu propagateStateUpwards na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(item: HTMLElement) => void

propagateStateDownwards

Popis	Spustí metódu propagateStateDownwards na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(item: object) => void

CSS tieňové časti

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.

CSS vlastné premenné

Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.

Sloty

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.