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

# Steps 步骤条

> Steps 步骤条组件参考，介绍步骤项配置与当前态控制，引导用户按既定流程分步完成任务。

引导用户按照流程完成任务的导航条。

## 何时使用

* 当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。

## 组件示例

<iframe src="https://www.aliwork.com/developer/steps-v2?isRenderNav=false" width="100%" height="480" frameBorder="0" />

## 组件属性

| 属性               | 说明        | 类型                                                                        | 默认值                                                                                                                                                                                                          |
| ---------------- | --------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `animation`      | 是否开启动效    | `boolean`                                                                 | `true`                                                                                                                                                                                                       |
| `contentRender`  | 内容自定义渲染   | `(item: StepsDataSource, index: number)=> ReactNode`                      | -                                                                                                                                                                                                            |
| `current`        | 当前步骤      | `number`                                                                  | `1`                                                                                                                                                                                                          |
| `dataSource`     | 步骤数据      | [StepsDataSource\[\]](/zh/open/yida/components/interface#stepsdatasource) | `[ { "title": "step1", "content": "Open the refrigerator door" }, { "title": "step2", "content": "Put the elephant in the refrigerator" }, { "title": "step3", "content": "Close the refrigerator door" } ]` |
| `direction`      | 步骤条展示方向   | `'horizontal' \| 'vertical'`                                              | `'horizontal'`                                                                                                                                                                                               |
| `labelPlacement` | 内容排列方式    | `'horizontal' \| 'vertical'`                                              | `'vertical'`                                                                                                                                                                                                 |
| `onClick`        | 点击步骤时触发事件 | `(index: number) => void`                                                 | -                                                                                                                                                                                                            |
| `readOnly`       | 是否只读模式    | `boolean`                                                                 | `false`                                                                                                                                                                                                      |
| `shape`          | 步骤条展示类型   | `'circle' \| 'arrow' \| 'dot'`                                            | `'circle'`                                                                                                                                                                                                   |