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. When the boolean reorder attribute is set on wje-tree, direct content in the start slot acts as the drag handle for moving items.

Reordering Items

Reordering is enabled with the reorder attribute on wje-tree. An item can be moved before the target, after the target, or inside the target item. After a successful move, the component dispatches the wje-tree:move event.

The event detail contains the same core fields as wje-reorder:change (from, to, order, orderElements) and adds tree-specific data that can be sent to a backend: itemId, targetId, fromParentId, toParentId, position, and orderIds. Item and parent ids are read from the value attribute, falling back to id.

Drop indicators can be themed with CSS tokens such as --wje-tree-item-drop-color, --wje-tree-item-drop-line-width, --wje-tree-item-drop-border-width, and --wje-tree-item-drop-border-radius.

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

reorder

Popis	Určuje, či je voľba reorder zapnutá a ovplyvňuje správanie komponentu.
Atribút	reorder
Typ	boolean
Predvolené	false

selection

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

Events

Názov	Popis
wje-tree:move	Vyvolá sa pri odoslaní udalosti wje-tree:move.

Methods

getAllItems

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

appendTemplateSlot

Popis	Spustí metódu appendTemplateSlot na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(item: HTMLElement, template: HTMLTemplateElement｜null, slotName: string) => void

getTemplateSlotClass

Popis	Vráti template slot class z aktuálneho stavu komponentu.
Signatúra	(slotName: string) => string

setupReorderHandle

Popis	Inicializuje reorder handle pred interaktívnym použitím.
Signatúra	(item: HTMLElement) => void

getTreeItemFromEvent

Popis	Vráti tree položku from udalosť z aktuálneho stavu komponentu.
Signatúra	(e: Event) => HTMLElement｜null

isReorderHandleEvent

Popis	Overí, či je reorder handle udalosť aktuálne pravda.
Signatúra	(e: Event) => boolean

isTreeItem

Popis	Overí, či je tree položku aktuálne pravda.
Signatúra	(node: object) => boolean

getDirectTreeItems

Popis	Vráti direct tree položky z aktuálneho stavu komponentu.
Signatúra	(parent: HTMLElement) => HTMLElement[]

getTreeItemIndex

Popis	Vráti tree položku index z aktuálneho stavu komponentu.
Signatúra	(item: HTMLElement) => number

canDrop

Popis	Spustí metódu canDrop na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(draggedItem: HTMLElement, targetItem: HTMLElement) => boolean

getDropPosition

Popis	Vráti pustenie position z aktuálneho stavu komponentu.
Signatúra	(e: DragEvent, target: HTMLElement｜null) => 'before'｜'inside'｜'after'

setDropState

Popis	Nastaví pustenie state a aplikuje súvisiace zmeny stavu.
Signatúra	(target: HTMLElement, position: string) => void

clearDropState

Popis	Vyčistí pustenie state a obnoví súvisiace hodnoty.
Signatúra	() => void

clearDragState

Popis	Vyčistí ťahanie state a obnoví súvisiace hodnoty.
Signatúra	() => void

getDropPositionClass

Popis	Vráti pustenie position class z aktuálneho stavu komponentu.
Signatúra	(position: 'before'｜'inside'｜'after') => string

moveItem

Popis	Presunie položku na novú pozíciu v dátach komponentu.
Signatúra	(draggedItem: HTMLElement, targetItem: HTMLElement, position: 'before'｜'inside'｜'after') => object｜null

getOrderElements

Popis	Vráti order elements z aktuálneho stavu komponentu.
Signatúra	(parent: HTMLElement) => HTMLElement[]

getOrderIds

Popis	Vráti order ids z aktuálneho stavu komponentu.
Signatúra	(parent: HTMLElement) => Array<string｜null>

getItemId

Popis	Vráti položku id z aktuálneho stavu komponentu.
Signatúra	(item: HTMLElement｜null) => string｜null

syncTreeItems

Popis	Synchronizuje tree položky s externým alebo interným zdrojom stavu.
Signatúra	() => void

refreshMovedItems

Popis	Spustí metódu refreshMovedItems na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(items: HTMLElement[]) => 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.