> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# ステップバー

> YiDA の Steps コンポーネントの設定リファレンス。ステップ項目の定義方法や現在のステップ状態の制御方法を解説し、ユーザーをタスクに沿って段階的に誘導する実装手順を紹介します。

タスクに沿ってユーザーを段階的に誘導するナビゲーションバーです。

## 使用シーン

* タスクが複雑な場合や、順序に依存関係がある場合に、複数のステップに分割してタスクを簡素化します。

## コンポーネント例

## コンポーネントプロパティ

| 属性               | 説明                     | タイプ                                                                       | デフォルト                                                                                                                                            |
| ---------------- | ---------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `animation`      | アニメーションを有効にするかどうか      | `boolean`                                                                 | `true`                                                                                                                                           |
| `contentRender`  | コンテンツのカスタムレンダリング       | `(item: StepsDataSource, index: number)=> ReactNode`                      | -                                                                                                                                                |
| `current`        | 現在のステップ                | `number`                                                                  | `1`                                                                                                                                              |
| `dataSource`     | ステップデータ                | [StepsDataSource\[\]](/ja/open/yida/components/interface#stepsdatasource) | `[ { "title": "ステップ1", "content": "冷蔵庫のドアを開ける" }, { "title": "ステップ2", "content": "象を冷蔵庫に入れる" }, { "title": "ステップ3", "content": "冷蔵庫のドアを閉める" } ]` |
| `direction`      | ステップバーの表示方向            | `'horizontal' \| 'vertical'`                                              | `'horizontal'`                                                                                                                                   |
| `labelPlacement` | コンテンツのレイアウト            | `'horizontal' \| 'vertical'`                                              | `'vertical'`                                                                                                                                     |
| `onClick`        | ステップをクリックしたときに発火するイベント | `(index: number) => void`                                                 | -                                                                                                                                                |
| `readOnly`       | 閲覧のみモードを有効にするかどうか      | `boolean`                                                                 | `false`                                                                                                                                          |
| `shape`          | ステップバーの表示タイプ           | `'circle' \| 'arrow' \| 'dot'`                                            | `'circle'`                                                                                                                                       |