# element-steps

> A element-steps component for Vue.js.

## Demo

http://element-component.github.io/element-steps

## Installation

```shell
npm i element-steps -D
```

## Usage

```javascript
import Vue from 'vue'
import ElStep from 'element-steps'
import 'element-theme-chalk/dist/step.css'

Vue.use(ElStep)
```

or

```javascript
import Vue from 'vue'
import { ElSteps, ElStep } from 'element-steps'

Vue.component('el-steps', ElSteps)
Vue.component('el-step', ElStep)
```

### Steps Attributes

| 参数           | 说明                                 | 类型    | 可选值                            | 默认值     |
| -------------- | ------------------------------------ | ------- | --------------------------------- | ---------- |
| space          | 每个 step 的间距，不填写将自适应间距 | Number  | —                                 | —          |
| direction      | 显示方向                             | string  | vertical/horizontal               | horizontal |
| active         | 设置当前激活步骤                     | number  | —                                 | 0          |
| process-status | 设置当前步骤的状态                   | string  | wait/process/finish/error/success | process    |
| finish-status  | 设置结束步骤的状态                   | string  | wait/process/finish/error/success | finish     |
| align-center   | 标题描述居中对齐                     | boolean | -                                 | false      |

### Step Attributes

| 参数        | 说明       | 类型                                                                | 可选值 | 默认值 |
| ----------- | ---------- | ------------------------------------------------------------------- | ------ | ------ |
| title       | 标题       | string                                                              | —      | —      |
| description | 描述性文字 | string                                                              | —      | —      |
| icon        | 图标       | Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入 | string | —      |

### Step Slot

| name        | 说明       |
| ----------- | ---------- |
| icon        | 图标       |
| title       | 标题       |
| description | 描述性文字 |

## Development

```shell
make dev

## test
make test

## build
make build
```

# License

[MIT](https://opensource.org/licenses/MIT)