Steps
ui.widgets.Steps여러 단계 작업의 완료, 현재, 대기 상태를 보여 줍니다.
BEHAVIOR CONTRACT
가로와 세로 레이아웃이 current index와 완료 아이콘 규약을 공유합니다.
RECORDED INTERACTION
step 2 활성 상태와 세로 완료 상태를 보여 줍니다.
// ── Steps ──
pub fn buildSteps(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
const a = cx.allocator;
const icons = ui.assets.common;
const c = try col(cx, 24);
const items = [_]W.StepItem{
.{ .title = "Account", .description = "Create account" },
.{ .title = "Profile", .description = "Fill details" },
.{ .title = "Done", .description = "Finish" },
};
// 水平:completed step 用真实 check 图标(不传 check_icon_asset 时回退成 "v" 字符不美观)
try c.appendChild(a, try label(cx, "Horizontal (step 2 active)"));
try c.appendChild(a, try W.Steps(.{ .items = &items, .initial_current = 1, .check_icon_asset = icons.check }).mount(scope, cx));
// 垂直
try c.appendChild(a, try label(cx, "Vertical"));
try c.appendChild(a, try W.Steps(.{ .items = &items, .initial_current = 2, .direction = .vertical, .check_icon_asset = icons.check }).mount(scope, cx));
return c;
}Storybook에 있는 이 story의 원본 코드입니다(zenit 5f9add5+wip 2026-09-30). W는 ui.widgets이며, col / row / label은 Storybook 내부의 작은 레이아웃 헬퍼입니다.
StepsProps
ui.widgets.Stepsfn Steps(props: StepsProps) StepsBuilder필드
타입
기본값
설명
items[]const StepItem&.{}—
initial_currentusize0当前步骤索引。**只在 mount 时读取一次** —— Steps 是纯静态渲染 (无内部 state),改这个值不会让已挂载的实例更新。 需要动态步进请重新 mount,或用 ui.Show/For 驱动。
directionDirection.horizontal—
check_icon_asset?svg_assets.Assetnull—
*Node
ui.widgets.Stepsmount는 *Node을(를) 직접 반환합니다. 부모 노드에 append하면 됩니다.