---
title: "Composant Steps — zenit Zig UI"
description: "États terminé, en cours et en attente d'une tâche en plusieurs étapes. Les dispositions horizontale et verticale partagent l'index courant et les icônes de…"
url: https://zenit.z.express/fr/components/steps
language: fr
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_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`

États terminé, en cours et en attente d'une tâche en plusieurs étapes.

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

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

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

[Voir le code sur GitHubexamples/storybook/stories.zig:2372](https://github.com/version-next/zenit/blob/HEAD/examples/storybook/stories.zig#L2372)

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

| Champ | Type | Défaut | Description |
| --- | --- | --- | --- |
| `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 renvoie directement `*Node` : ajoutez-le à un parent.