Stack
ui.widgets.HStack / VStackDisposición horizontal y vertical habitual.
BEHAVIOR CONTRACT
gap, align, justify y wrap usan las mismas reglas de coordenadas que box.
RECORDED INTERACTION
Muestra stacks horizontales, verticales y anidados.
// ── 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;
}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.
HStackProps
ui.widgets.HStackfn HStack(props: HStackProps) HStackBuilderCampo
Tipo
Predeterminado
Descripción
gapf320间距
justifyJustify.start主轴对齐
align_itemsAlignment.center交叉轴对齐
width?f32null宽度
height?f32null高度
padding?Paddingnull内边距
background?Colornull背景色
reverseboolfalse反向
wrapboolfalse换行
VStackProps
ui.widgets.VStackfn VStack(props: VStackProps) VStackBuilderCampo
Tipo
Predeterminado
Descripción
gapf320间距
justifyJustify.start主轴对齐
align_itemsAlignment.stretch交叉轴对齐
width?f32null宽度
height?f32null高度
padding?Paddingnull内边距
background?Colornull背景色
reverseboolfalse反向
*Node
ui.widgets.HStackmount devuelve *Node directamente: añádelo a un nodo padre.
*Node
ui.widgets.VStackmount devuelve *Node directamente: añádelo a un nodo padre.