components/stack
レイアウトと大規模データ · 46 / 64

Stack

ui.widgets.HStack / VStack

よく使う水平・垂直の並び。

BEHAVIOR CONTRACT

gap、align、justify、wrap は基本の box レイアウトと同じ座標ルールを使います。

RECORDED INTERACTION

横方向、縦方向、入れ子の Stack を示します。

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;
}
GitHub でソースを見るexamples/storybook/stories.zig:1894

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