Stack
ui.widgets.HStack / VStack자주 쓰는 가로, 세로 배치.
BEHAVIOR CONTRACT
gap, align, justify, wrap이 기본 box 레이아웃과 같은 좌표 규칙을 사용합니다.
RECORDED INTERACTION
가로, 세로, 중첩 Stack을 보여 줍니다.
// ── 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;
}Storybook에 있는 이 story의 원본 코드입니다(zenit 5f9add5+wip 2026-09-30). W는 ui.widgets이며, col / row / label은 Storybook 내부의 작은 레이아웃 헬퍼입니다.
HStackProps
ui.widgets.HStackfn HStack(props: HStackProps) HStackBuilder필드
타입
기본값
설명
gapf320间距
justifyJustify.start主轴对齐
align_itemsAlignment.center交叉轴对齐
width?f32null宽度
height?f32null高度
padding?Paddingnull内边距
background?Colornull背景色
reverseboolfalse反向
wrapboolfalse换行
VStackProps
ui.widgets.VStackfn VStack(props: VStackProps) VStackBuilder필드
타입
기본값
설명
gapf320间距
justifyJustify.start主轴对齐
align_itemsAlignment.stretch交叉轴对齐
width?f32null宽度
height?f32null高度
padding?Paddingnull内边距
background?Colornull背景色
reverseboolfalse反向
*Node
ui.widgets.HStackmount는 *Node을(를) 직접 반환합니다. 부모 노드에 append하면 됩니다.
*Node
ui.widgets.VStackmount는 *Node을(를) 직접 반환합니다. 부모 노드에 append하면 됩니다.