Tree
@xui/treeA hierarchical tree with expand/collapse carets, single selection, optional icons and secondary labels. Full keyboard support: Up/Down move, Right/Left expand/collapse or step in/out, Enter/Space select. [(selectedId)] binding.
Install
pnpm add @xui/tree Add the barrel to a standalone component's imports:
import { XuiTreeImports } from '@xui/tree';
@Component({
imports: [XuiTreeImports],
// …
})Examples
Default
Loading preview…
<div class="w-80"><xui-tree [nodes]="nodes" [(selectedId)]="selected" aria-label="File explorer" /></div>API
A hierarchical tree of {@link XuiTreeNode}s with expand/collapse carets, single selection, optional icons and secondary labels, and full keyboard support (Up/Down move, Right/Left expand/collapse or step in/out, Enter/Space select).
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''ariaLabelstring | nullAccessible name for the tree — what it is a tree of.nullnodesXuiTreeNode[]The roots. Each node carries its own children, so the whole tree is one nested array.[]selectedIdstring | number | nullThe selected node id. Two-way bindable with [(selectedId)].nullOutputs
nodeClickXuiTreeNodeEmits the node that was activated, by click or by Enter.nodeExpandedXuiTreeNodeEmits the node that was just expanded.nodeCollapsedXuiTreeNodeEmits the node that was just collapsed.