ant-design/components/steps/index.zh-CN.md
zombieJ 155642d14a
feat: Steps support clickable (#16773)
* support clickable

* update snapshot

* update desc
2019-05-25 21:01:21 +08:00

51 lines
1.9 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
category: Components
subtitle: 步骤条
type: 导航
cols: 1
title: Steps
---
引导用户按照流程完成任务的导航条。
## 何时使用
当任务复杂或者存在先后关系时,将其分解成一系列步骤,从而简化任务。
## API
```jsx
<Steps>
<Step title="第一步" />
<Step title="第二步" />
<Step title="第三步" />
</Steps>
```
### Steps
整体步骤条。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| className | 步骤条类名 | string | - | |
| current | 指定当前步骤,从 0 开始记数。在子 Step 元素中,可以通过 `status` 属性覆盖状态 | number | 0 | |
| direction | 指定步骤条方向。目前支持水平(`horizontal`)和竖直(`vertical`)两种方向 | string | horizontal | |
| labelPlacement | 指定标签放置位置,默认水平放图标右侧,可选 `vertical` 放图标下方 | string | `horizontal` | |
| progressDot | 点状步骤条,可以设置为一个 functionlabelPlacement 将强制为 `vertical` | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false | |
| size | 指定大小,目前支持普通(`default`)和迷你(`small` | string | default | |
| status | 指定当前步骤的状态,可选 `wait` `process` `finish` `error` | string | process | |
| initial | 起始序号,从 0 开始记数 | number | 0 | |
| onChange | 点击切换步骤时触发 | (current) => void | - | 3.19.0 |
### Steps.Step
步骤条内的每一个步骤。
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| description | 步骤的详情描述,可选 | string\|ReactNode | - |
| icon | 步骤图标的类型,可选 | string\|ReactNode | - |
| status | 指定状态。当不配置该属性时,会使用 Steps 的 `current` 来自动指定状态。可选:`wait` `process` `finish` `error` | string | wait |
| title | 标题 | string\|ReactNode | - |