Components / Tree

Tree

A styled tree over the headless Navius Tree (the full WAI-APG tree contract: role=tree, roving tabindex, arrow expand / collapse, typeahead, and multi-select shortcuts). Nest ZitsTreeItem nodes; indentation follows depth and the chevron rotates on expand. Arrow and type through the tree below. This preview is the real component running in WebAssembly.

Examples

src

components

Button.razor

Card.razor

App.razor

README.md

razor

<ZitsTree TValue="string" DefaultExpandedValues="_expanded">
    <ZitsTreeItem Value="src" Label="src">
        <ZitsTreeItem Value="components" Label="components">
            <ZitsTreeItem Value="button" Label="Button.razor" />
        </ZitsTreeItem>
    </ZitsTreeItem>
    <ZitsTreeItem Value="readme" Label="README.md" />
</ZitsTree>

Anatomy

A node with ChildContent becomes an expandable parent; a leaf omits it.

text

ZitsTree                    (role=tree; SelectionMode single | multiple)
└── ZitsTreeItem            (Value + Label; chevron + row)
    └── ZitsTreeItem        (nested ChildContent -> expandable parent)

Installation

Terminal bash

navius add tree

API reference

ZitsTree<TValue> (root):

Prop	Type	Default
SelectionMode	string	"single"
FocusMode	string	"roving"
SelectedValue	TValue?	null
DefaultSelectedValue	TValue?	null
SelectedValues	IReadOnlyList<TValue>?	null
ExpandedValues	IReadOnlyCollection<TValue>?	null
DefaultExpandedValues	IReadOnlyCollection<TValue>?	null
Orientation	string	"vertical"
Disabled	bool	false

Parts

Prop	Type	Default
ZitsTreeItem	node	Value (identity), Label (text + typeahead), Disabled