---
title: "Componente Steps — zenit Zig UI"
description: "Estados completado, actual y pendiente de una tarea en varias etapas. Los layouts horizontal y vertical comparten el índice actual y los iconos de completado."
url: https://zenit.z.express/es/components/steps
language: es
alternate_en: https://zenit.z.express/components/steps.md
alternate_zh: https://zenit.z.express/zh/components/steps.md
alternate_ja: https://zenit.z.express/ja/components/steps.md
alternate_ko: https://zenit.z.express/ko/components/steps.md
alternate_fr: https://zenit.z.express/fr/components/steps.md
alternate_de: https://zenit.z.express/de/components/steps.md
project: zenit v0.1.0-alpha (Zig 0.15.2, macOS)
source: https://github.com/version-next/zenit
---

# Steps

`ui.widgets.Steps`

Estados completado, actual y pendiente de una tarea en varias etapas.

[Video](https://zenit.z.express/media/stories/steps.mp4?v=96584e2867)

**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.

`examples/storybook/stories.zig:2372`

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

[Ver el código en GitHubexamples/storybook/stories.zig:2372](https://github.com/version-next/zenit/blob/HEAD/examples/storybook/stories.zig#L2372)

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.Steps`

[src/ui/components/steps/mod.zig:28](https://github.com/version-next/zenit/blob/HEAD/src/ui/components/steps/mod.zig#L28)

```zig
fn Steps(props: StepsProps) StepsBuilder
```

| Campo | Tipo | Predeterminado | Descripción |
| --- | --- | --- | --- |
| `items` | `[]const StepItem` | `&.{}` | — |
| `initial_current` | `usize` | `0` | 当前步骤索引。\*\*只在 mount 时读取一次\*\* —— Steps 是纯静态渲染 （无内部 state），改这个值不会让已挂载的实例更新。 需要动态步进请重新 mount，或用 ui.Show/For 驱动。 |
| `direction` | `Direction` | `.horizontal` | — |
| `check_icon_asset` | `?svg_assets.Asset` | `null` | — |

### \*Node

`ui.widgets.Steps`

mount devuelve `*Node` directamente: añádelo a un nodo padre.