Tree item <l-tree-item>

A single node inside <l-tree>. Nested <l-tree-item> children become sub-nodes. See Tree for examples, selection modes, and keyboard behaviour.

HTML tag<l-tree-item>

⏣Native HTML

⬡Progressive

◇Custom

⬢Shadow DOM

Custom Element · Shadow DOM

API reference

Importing

JS

import 'luxen-ui/tree-item';

Attributes & Properties

expandedAttribute

Whether the item is open

selectedAttribute

Whether the item is selected

indeterminateAttribute

Forces the checkbox to the indeterminate state (normally managed by the tree in cascade mode)

disabledAttribute

Prevents interaction and selection

lazyAttribute

Marks a branch as having children that will be loaded on first expand

loadingAttribute

Shows a spinner in place of the chevron

Methods

toggle()Method

Toggles expanded. Emits lazy-load the first time a lazy branch opens

getChildrenItems()Method

Returns the direct <l-tree-item> children

isLeaf()Method

Returns true when the item has no children and is not lazy

getTextLabel()Method

Returns the trimmed text label of the item

Events

expandEvent

Fired when the item opens

collapseEvent

Fired when the item closes

lazy-loadEvent

Fired when a lazy item is expanded for the first time. Append children and clear the lazy attribute.

Slots

(default)Slot

Label content (kept to a single row)

prefixSlot

Leading content (e.g. icon)

suffixSlot

Trailing content

expand-iconSlot

Icon shown when the item is collapsed

collapse-iconSlot

Icon shown when the item is expanded

contentSlot

Block content that belongs to the item but not to its header row (e.g. comment body, action bar). Hidden when a branch is collapsed.

CSS parts

basePart

The item row

expand-buttonPart

The chevron toggle area

checkboxPart

The native checkbox input

labelPart

The label container

branchPart

Wrapper around the content and children; carries the indent guide

contentPart

The content slot wrapper (block area between the row and the children)

childrenPart

The nested items container

CSS custom properties

All layout tokens (--row-height, --row-padding-inline, --chevron-size, --item-gap, --indent-*) are declared on <l-tree> and cascade to every item. See Tree › CSS custom properties.