Steps
ui.widgets.Steps展示多阶段任务的已完成、当前和待处理状态。
BEHAVIOR CONTRACT
水平 / 垂直方向共享 current index 和完成图标契约。
RECORDED INTERACTION
录像展示 step 2 active 与垂直完成态。
// ── 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 到父节点即可。