Component TreeItem

TreeItem

A single row in a Tree. Carries the indent depth, expand/collapse state, and selection state. Wires click, toggle (chevron), and double-click handlers.

Import

use yororen_ui::headless::tree_item::tree_item;

Minimal example

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 |_v: bool, _window, cx| {
            entity.update(cx, |s, _cx| s.expanded = "docs".into());
        }
    })
    .on_click({
        let entity = cx.entity();
        move |_event, _window, cx| {
            entity.update(cx, |s, _cx| s.selected = "docs".into());
        }
    })
    .render(cx, window)

Props

Method	Purpose
depth(n)	Indent level (the renderer multiplies by the indent width).
has_children(v)	Show the chevron.
expanded(v)	Chevron orientation (open vs closed).
selected(v)	Apply the "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)	Fn(&ClickEvent, &mut Window, &mut App) + 'static + Send + Sync.

Notes

• Factory takes (id, node_id, label, cx). The cx is needed for the focus handle.
• No state entity. Capture self with cx.entity().clone().
• Unlike most other headless components, tree_item.render(self, cx, window) is two-arg. The window is needed because the renderer tracks focus via the focus handle.

See also

Tree, ListItem, VirtualRow