数据展示Display · 28 / 64

Steps

ui.widgets.Steps

展示多阶段任务的已完成、当前和待处理状态。Done, current and pending states of a multi-stage task.

BEHAVIOR CONTRACT

水平 / 垂直方向共享 current index 和完成图标契约。Horizontal and vertical layouts share the current index and completion icons.

RECORDED INTERACTION

录像展示 step 2 active 与垂直完成态。Shows step 2 active and the vertical completed state.

examples/storybook/stories.zig:2372

// ── 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;
}

在 GitHub 查看源码View source on GitHubexamples/storybook/stories.zig:2372

这是 Storybook 中该 story 的原样代码（zenit 5f9add5+wip 2026-09-30）。其中 W 即 ui.widgets，col / row / label 是 Storybook 内的布局小工具。The story's verbatim source from the Storybook (zenit 5f9add5+wip 2026-09-30). W is ui.widgets; col / row / label are small Storybook layout helpers.

← PREV

BreadcrumbBreadcrumb

TreeTree