components/tree
Visualización · 29 / 64

Tree

ui.widgets.Tree

Jerarquías, árboles de archivos y estructuras desplegables.

BEHAVIOR CONTRACT

El despliegue, la selección, la sangría, los iconos y la navegación por teclado funcionan sobre ids de nodo estables.

RECORDED INTERACTION

El harness pulsa el nodo src para plegar o desplegar su subárbol.

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;
}
Ver el código en GitHubexamples/storybook/stories.zig:2420

El código literal de la story en el Storybook (zenit 5f9add5+wip 2026-09-30). W es ui.widgets; col / row / label son pequeños helpers de layout del Storybook.

zenit · Doble licenciaGratis para proyectos de código abierto bajo GPL-3.0-only; los productos cerrados o comerciales necesitan una licencia comercial.Contacta con el autor: zongyi.xzy#gmail.com (cambia # por @)zenit 5f9add5+wip 2026-09-30