Tree
ui.widgets.Tree계층 데이터, 파일 트리, 펼칠 수 있는 구조.
BEHAVIOR CONTRACT
펼치기, 선택, 들여쓰기, 아이콘, 키보드 탐색이 안정적인 node id를 기준으로 동작합니다.
RECORDED INTERACTION
harness가 src 노드를 클릭해 하위 트리를 접고 펼칩니다.
// ── 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;
}Storybook에 있는 이 story의 원본 코드입니다(zenit 5f9add5+wip 2026-09-30). W는 ui.widgets이며, col / row / label은 Storybook 내부의 작은 레이아웃 헬퍼입니다.
TreeProps
ui.widgets.Treefn Tree(props: TreeProps) TreeBuilder필드
타입
기본값
설명
nodes[]const TreeNodeData&.{}—
indentf3220—
selectablebooltrue—
on_select?core.HandlerRefnull选中回调。用 `cx.strHandlerFrom(State, ptr, method)` 构造即可在回调里 拿到**被选中节点的 id**(此前是无 payload 的 HandlerRef,而 FlatNode 是私有的,应用根本无从知道选中了谁)。注册成无参 handler 也仍会被调用。
on_expand?core.HandlerRefnull—
expand_icon_asset?svg_assets.Assetnull—
selection_modeselection_mod.SelectionMode.single选择模式。默认 .single = 与加入多选之前的行为一致(非破坏性新增)。 .multi 下 Cmd/Ctrl 点选切换、Shift 点选连续区间(按 flat_index)。
TreeResult
ui.widgets.Tree필드
타입
기본값
설명
wrapper*Node—
—
state*TreeState—
—