# Steps 步骤条

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


### 基本使用
简单的步骤条。

@[demo](./demo/basic.vue)

### 迷你版
迷你版的步骤条，通过设置`<Steps size="small">` 启用.

@[demo](./demo/small.vue)

### 带图标的步骤条
通过设置 Step 的 icon 属性，可以启用自定义图标。

@[demo](./demo/icon.vue)

### title 竖直排列
通过设置 Step 的 labelLayout 属性，可以设置方向。

@[demo](./demo/layout.vue)

### 步骤切换
通常配合内容及按钮使用，表示一个流程的处理进度。

@[demo](./demo/change.vue)

### 竖直方向的步骤条
简单的竖直方向的步骤条。

@[demo](./demo/direction.vue)

### 竖直方向的小型步骤条
简单的竖直方向的小型步骤条。

@[demo](./demo/direction-small.vue)

### 步骤运行错误
使用 Steps 的 status 属性来指定当前步骤的状态。

@[demo](./demo/status.vue)

### 点状步骤条
包含步骤点的进度条。

@[demo](./demo/dot.vue)

### 自定义点状步骤条
为点状步骤条增加自定义展示。

@[demo](./demo/diy.vue)


### Steps Attributes
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态 | number | 0 |
| direction | 指定步骤条方向。目前支持水平（horizontal）和竖直（vertical）两种方向 | string | horizontal |
| labelLayout | 指定 title 和 description 的排列方向。目前支持水平（horizontal）和竖直（vertical）两种方向 | string | horizontal |
| pdot | 点状步骤条 | Boolean | false |
| size | 指定大小，目前支持普通（default）和迷你（small） | string | default |
| status | 指定当前步骤的状态，可选 wait process finish error | string | process |

### Step Attributes
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| description | 步骤的详情描述，可选 | string | - |
| icon | 步骤图标的类型，可选 | string | - |
| status | 指定状态。当不配置该属性时，会使用 Steps 的 current 来自动指定状态。可选：wait process finish error | string | wait |
| title | 标题 | string | - |