components/stack
Mise en page · 46 / 64

Stack

ui.widgets.HStack / VStack

Disposition horizontale et verticale courante.

BEHAVIOR CONTRACT

gap, align, justify et wrap utilisent les mêmes règles de coordonnées que box.

RECORDED INTERACTION

Montre des stacks horizontaux, verticaux et imbriqués.

examples/storybook/stories.zig:1894
// ── Stack (VStack / HStack) ──
pub fn buildStack(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const a = cx.allocator;
    const c = try col(cx, 16);
    try c.appendChild(a, try label(cx, "HStack gap=8"));
    const h = try W.HStack(.{ .gap = 8 }).mount(scope, cx);
    inline for (.{ "A", "B", "C" }) |t| {
        try h.appendChild(a, try W.Button(.{ .label = t, .variant = .secondary }).mount(scope, cx));
    }
    try c.appendChild(a, h);
    try c.appendChild(a, try label(cx, "VStack gap=8"));
    const v = try W.VStack(.{ .gap = 8 }).mount(scope, cx);
    inline for (.{ "First", "Second", "Third" }) |t| {
        try v.appendChild(a, try W.Tag(.{ .text = t }).mount(scope, cx));
    }
    try c.appendChild(a, v);
    return c;
}
Voir le code sur GitHubexamples/storybook/stories.zig:1894

Le code source tel quel de la story dans le Storybook (zenit 5f9add5+wip 2026-09-30). W désigne ui.widgets ; col / row / label sont de petits helpers de mise en page du Storybook.

zenit · Double licenceGratuit pour les projets open source sous GPL-3.0-only ; les produits propriétaires ou commerciaux nécessitent une licence commerciale.Contacter l’auteur : zongyi.xzy#gmail.com (remplacez # par @)zenit 5f9add5+wip 2026-09-30