Steps
ui.widgets.StepsEstados completado, actual y pendiente de una tarea en varias etapas.
BEHAVIOR CONTRACT
Los layouts horizontal y vertical comparten el índice actual y los iconos de completado.
RECORDED INTERACTION
Muestra el paso 2 activo y el estado completado 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;
}El código literal de la story en el Storybook (zenit 5f9add5+wip 2026-09-30). W es ui.widgets; col / row / label son pequeños helpers de layout del Storybook.
StepsProps
ui.widgets.Stepsfn Steps(props: StepsProps) StepsBuilderCampo
Tipo
Predeterminado
Descripción
items[]const StepItem&.{}—
initial_currentusize0当前步骤索引。**只在 mount 时读取一次** —— Steps 是纯静态渲染 (无内部 state),改这个值不会让已挂载的实例更新。 需要动态步进请重新 mount,或用 ui.Show/For 驱动。
directionDirection.horizontal—
check_icon_asset?svg_assets.Assetnull—
*Node
ui.widgets.Stepsmount devuelve *Node directamente: añádelo a un nodo padre.