Steps
ui.widgets.StepsÉtats terminé, en cours et en attente d'une tâche en plusieurs étapes.
BEHAVIOR CONTRACT
Les dispositions horizontale et verticale partagent l'index courant et les icônes de complétion.
RECORDED INTERACTION
Montre l'étape 2 active et l'état terminé en vertical.
// ── 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;
}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.
StepsProps
ui.widgets.Stepsfn Steps(props: StepsProps) StepsBuilderChamp
Type
Défaut
Description
items[]const StepItem&.{}—
initial_currentusize0当前步骤索引。**只在 mount 时读取一次** —— Steps 是纯静态渲染 (无内部 state),改这个值不会让已挂载的实例更新。 需要动态步进请重新 mount,或用 ui.Show/For 驱动。
directionDirection.horizontal—
check_icon_asset?svg_assets.Assetnull—
*Node
ui.widgets.Stepsmount renvoie directement *Node : ajoutez-le à un parent.