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