Tree

Overview

Tree renders NaviusTree, the headless primitive that owns the full WAI-APG tree contract (role="tree", roving tabindex, arrow expand/collapse, typeahead, multi-select shortcuts), and is presentational only: all behavior and ARIA come from the primitive. ZitsTreeItem composes NaviusTreeItem for each node, bundling a rotating-chevron indicator and label trigger, plus a NaviusTreeGroup for nested items when the node has ChildContent. Indentation derives from the cascaded tree level.

Install

navius add tree --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsTree TValue="string" @bind-SelectedValue="_selected">
    <ZitsTreeItem Value="src" Label="src">
        <ZitsTreeItem Value="src/index.ts" Label="index.ts" />
    </ZitsTreeItem>
</ZitsTree>

@code {
    private string? _selected;
}

Parts and props

Disabled, Orientation, Dir, Label, LabelledBy, OnSelectionChange, and OnExpandedChange pass through to NaviusTree unchanged. The styled wrapper adds:

Prop	Type	Default	Description
`SelectionMode`	`string`	`"single"`	`none`, `single`, or `multiple`.
`FocusMode`	`string`	`"roving"`	`roving` or `activedescendant`.
`SelectedValue`	`TValue?`	`null`	Controlled single-select value. Bind with `@bind-SelectedValue`; forwarded only when set.
`DefaultSelectedValue`	`TValue?`	`null`	Uncontrolled initial single-select value.
`SelectedValues`	`IReadOnlyList<TValue>?`	`null`	Controlled multi-select values. Bind with `@bind-SelectedValues`; forwarded only when set.
`DefaultSelectedValues`	`IReadOnlyList<TValue>?`	`null`	Uncontrolled initial multi-select values.
`ExpandedValues`	`IReadOnlyCollection<TValue>?`	`null`	Controlled expanded values. Bind with `@bind-ExpandedValues`; forwarded only when set.
`DefaultExpandedValues`	`IReadOnlyCollection<TValue>?`	`null`	Uncontrolled initial expanded values.

ZitsTreeItem adds:

Prop	Type	Default	Description
`Value`	`string`	`""`	The node’s unique identity.
`Label`	`string?`	`null`	The node label; also the type-ahead match text.
`Disabled`	`bool`	`false`	Excludes this node from selection/keyboard navigation.

Styling surface

Attributes on ZitsTree is merged onto the root NaviusTree via Cn.Merge, and on ZitsTreeItem onto NaviusTreeItem, with the caller’s classes applied last.

Parameter	Values
`SelectionMode`	`none` · `single` · `multiple`
`FocusMode`	`roving` · `activedescendant`

Data attribute hooks

Part	Attribute	Description
Item content	`data-selected`	Present when the node is selected, emitted by `NaviusTreeItemContent`.
Item content	`data-disabled`	Present when `Disabled` is true, emitted by `NaviusTreeItemContent`.
Indicator	`data-expanded`	Present when the node is expanded, emitted by `NaviusTreeItemIndicator`; rotates the chevron.
Indicator	`data-leaf`	Present on a node with no children, emitted by `NaviusTreeItemIndicator`; hides the chevron.

Underlying primitives

NaviusTree