Tree

shadow

The Tree element allows hierarchical display of data in a tree structure. It is used to visualize categories, file systems or navigation structures. Tree contains wje-tree as the main container and wje-tree-item as the individual tree entries. Items can contain children, creating a nested hierarchy.

Basic use

The sample represents a basic tree with nested nodes to make the default opening and hierarchy clear.

Slots

The sample uses slots to add icons or secondary content at tree nodes.

Multiple

The preview allows multiple tree branches to be opened at once, which is useful when comparing more distant branches.

Indentation indentation

For multiple nesting levels (e.g. Deciduous -> Maple -> Field maple), indentation is applied continuously to each open branch. This makes the third and subsequent levels legibly separated from the parent.

TO DO complete tree and tree item docs

When to use

Use wje-tree when the user needs to navigate the application or transition between states/screens.

When not to use

Do not use multiple parallel navigation patterns that compete with each other.

Accessibility

Provide clear active/selected states, predictable tab order, and naming of controls.

Recommended practices

• Keep the URL and UI state in sync to make the navigation reproducible.
• Use consistent terminology for items across menus, breadcrumb and tabs.
• For deep structures, add auxiliary context (breadcrumb, title, icons).

Attributes and properties

selection

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

Events

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

Methods

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 shadow parts

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

CSS custom variables

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

Slots

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