---
title: "Steps コンポーネント — zenit Zig UI"
description: "複数段階のタスクの完了・現在・未処理の状態を示します。水平・垂直のレイアウトが current index と完了アイコンの仕様を共有します。"
url: https://zenit.z.express/ja/components/steps
language: ja
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_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`

複数段階のタスクの完了・現在・未処理の状態を示します。

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

**BEHAVIOR CONTRACT**

水平・垂直のレイアウトが current index と完了アイコンの仕様を共有します。

**RECORDED INTERACTION**

step 2 がアクティブな状態と、垂直レイアウトの完了状態を示します。

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

[GitHub でソースを見るexamples/storybook/stories.zig:2372](https://github.com/version-next/zenit/blob/HEAD/examples/storybook/stories.zig#L2372)

Storybook にあるこの story のコードそのままです（zenit 5f9add5+wip 2026-09-30）。`W` は `ui.widgets` のことで、`col` / `row` / `label` は 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
```

| フィールド | 型 | デフォルト値 | 説明 |
| --- | --- | --- | --- |
| `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 は `*Node` を直接返します。親ノードに append してください。