Skip to content

Component TreeItem

MeowLynxSea edited this page Jun 18, 2026 · 3 revisions

TreeItem

A single row in a Tree. Carries indent depth, expand/collapse state, and selection state.

use yororen_ui::headless::tree::node_id;
use yororen_ui::headless::tree_item::tree_item;

tree_item("docs-row", node_id("docs"), "docs", cx)
    .depth(0)
    .has_children(true)
    .expanded(self.expanded == "docs")
    .selected(self.selected == "docs")
    .on_toggle({
        let entity = cx.entity();
        move |_, _, cx| entity.update(cx, |s, _| s.expanded = "docs".into());
    })
    .on_click({
        let entity = cx.entity();
        move |_, _, cx| entity.update(cx, |s, _| s.selected = "docs".into());
    })
    .render(cx, window)

Props

Method Purpose
depth(n) Indent level (renderer multiplies by tokens.control.tree_item.indent).
has_children(v) Show the chevron.
expanded(v) Chevron orientation.
selected(v) Selected visual state.
disabled(v) Disable the row.
on_click(closure) Fn(&ClickEvent, &mut Window, &mut App) + 'static + Send + Sync.
on_toggle(closure) Fn(bool, &mut Window, &mut App) + 'static + Send + Sync. Chevron was clicked.
on_double_click(closure) Same shape as on_click.

Factory takes (id, node_id, label, cx). .render(cx, window) is two-arg (returns AnyElement) — the renderer tracks focus via a per-item focus handle.

See also: Tree, ListItem, VirtualRow.

Clone this wiki locally