components/tree
データ表示 · 29 / 64

Tree

ui.widgets.Tree

階層データ、ファイルツリー、展開可能な構造。

BEHAVIOR CONTRACT

展開、選択、インデント、アイコン、キーボード操作は安定した node id を軸に動作します。

RECORDED INTERACTION

harness が src ノードをクリックし、サブツリーを折りたたみ / 展開します。

examples/storybook/stories.zig:2420
// ── Tree ──
pub fn buildTree(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const leaves = [_]W.TreeNodeData{
        .{ .id = "main", .label_text = "main.zig" },
        .{ .id = "root", .label_text = "root.zig" },
    };
    const nodes = [_]W.TreeNodeData{
        .{ .id = "src", .label_text = "src", .children = &leaves },
        .{ .id = "readme", .label_text = "README.md" },
    };
    const t = try W.Tree(.{ .nodes = &nodes }).mount(scope, cx);
    return t.wrapper;
}
GitHub でソースを見るexamples/storybook/stories.zig:2420

Storybook にあるこの story のコードそのままです(zenit 5f9add5+wip 2026-09-30)。W は ui.widgets のことで、col / row / label は Storybook 内の小さなレイアウトヘルパーです。

zenit · デュアルライセンスオープンソースプロジェクトは GPL-3.0-only のもとで無料で使えます。クローズドソースや商用製品には商用ライセンスが必要です。作者への連絡先:zongyi.xzy#gmail.com(# を @ に置き換え)zenit 5f9add5+wip 2026-09-30