Skip to content

Component Tree

MeowLynxSea edited this page Jun 18, 2026 · 8 revisions

Tree

A tree view. Carries the TreeData model and the current expanded / selected ids.

use yororen_ui::headless::tree::{node_id, tree, TreeData};
use yororen_ui::headless::tree_item::tree_item;

let data = {
    let mut d = TreeData::new();
    let root   = node_id("root");
    let docs   = node_id("docs");
    let readme = node_id("readme");
    d.add(root.clone(),   docs.clone(),   "docs");
    d.add(docs.clone(),   readme.clone(), "README.md");
    d
};

tree("files", cx)
    .data(data)
    .expanded(node_id("docs"))
    .selected(node_id("readme"))
    .child(tree_item("docs-row", node_id("docs"), "docs", cx)
        .depth(0).has_children(true).expanded(true)
        .render(cx, window))
    .render(cx)

Props

Method Purpose
data(d) The TreeData model.
expanded(id) The currently expanded node id.
selected(id) The currently selected node id.
child(el) A rendered TreeItem.

node_id(s) interns a &str / String into a TreeNodeId — cheap to call repeatedly.

The parent view owns expanded and selected. .render(cx) returns Stateful<Div>. No state entity.

See also: TreeItem, ListItem, VirtualRow.

Clone this wiki locally