---
title: "Steps-Komponente — zenit Zig UI"
description: "Erledigte, aktuelle und ausstehende Zustände einer mehrstufigen Aufgabe. Horizontale und vertikale Layouts teilen sich den aktuellen Index und die…"
url: https://zenit.z.express/de/components/steps
language: de
alternate_en: https://zenit.z.express/components/steps.md
alternate_zh: https://zenit.z.express/zh/components/steps.md
alternate_es: https://zenit.z.express/es/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
project: zenit v0.1.0-alpha (Zig 0.15.2, macOS)
source: https://github.com/version-next/zenit
---

# Steps

`ui.widgets.Steps`

Erledigte, aktuelle und ausstehende Zustände einer mehrstufigen Aufgabe.

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

**BEHAVIOR CONTRACT**

Horizontale und vertikale Layouts teilen sich den aktuellen Index und die Abschluss-Icons.

**RECORDED INTERACTION**

Zeigt Schritt 2 aktiv und den vertikalen Abschlusszustand.

`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;
}
```

[Quellcode auf GitHub ansehenexamples/storybook/stories.zig:2372](https://github.com/version-next/zenit/blob/HEAD/examples/storybook/stories.zig#L2372)

Der unveränderte Quellcode der Story aus dem Storybook (zenit 5f9add5+wip 2026-09-30). `W` steht für `ui.widgets`; `col` / `row` / `label` sind kleine Layout-Helfer des Storybooks.

### 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
```

| Feld | Typ | Standard | Beschreibung |
| --- | --- | --- | --- |
| `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 gibt `*Node` direkt zurück – hängen Sie es an einen Elternknoten an.