Stack
ui.widgets.HStack / VStackDisposition 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.
// ── 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;
}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.
HStackProps
ui.widgets.HStackfn HStack(props: HStackProps) HStackBuilderChamp
Type
Défaut
Description
gapf320间距
justifyJustify.start主轴对齐
align_itemsAlignment.center交叉轴对齐
width?f32null宽度
height?f32null高度
padding?Paddingnull内边距
background?Colornull背景色
reverseboolfalse反向
wrapboolfalse换行
VStackProps
ui.widgets.VStackfn VStack(props: VStackProps) VStackBuilderChamp
Type
Défaut
Description
gapf320间距
justifyJustify.start主轴对齐
align_itemsAlignment.stretch交叉轴对齐
width?f32null宽度
height?f32null高度
padding?Paddingnull内边距
background?Colornull背景色
reverseboolfalse反向
*Node
ui.widgets.HStackmount renvoie directement *Node : ajoutez-le à un parent.
*Node
ui.widgets.VStackmount renvoie directement *Node : ajoutez-le à un parent.