## Steps步骤条组件

## Import
```js
import { Steps, Step } from 'bxs-ui-vue'
```


## Example
#### 基础用法
```html
<bxs-steps :active="active">
  <bxs-step>基本信息</bxs-step>
  <bxs-step>银行卡信息</bxs-step>
  <bxs-step>阅读代理协议</bxs-step>
</bxs-steps>
```
```js
export default {
    data() {
        return {
            active: 0
        }
    }
}
```

#### 步骤带描述、状态
```html
<bxs-steps :active="active">
  <bxs-step description="平均2个工作日平均2个工作日">基本信息</bxs-step>
  <bxs-step :status="status">银行卡信息</bxs-step>
  <bxs-step description="平均4个工作日">阅读代理协议阅读代理协议</bxs-step>
</bxs-steps>
```
```js
export default {
    data() {
        return {
            active: 0,
            status: 'error'
        }
    }
}
```

#### 自定义颜色
```html
<bxs-steps :active="active" :active-color="activeColor">
  <bxs-step>基本信息</bxs-step>
  <bxs-step>银行卡信息</bxs-step>
  <bxs-step>阅读代理协议</bxs-step>
</bxs-steps>
```
```js
export default {
    data() {
        return {
            active: 1,
            activeColor:'#f50'
        }
    }
}
```

#### 燕尾型
```html
<bxs-steps :type="type" :active="active">
  <bxs-step>步骤一</bxs-step>
  <bxs-step>步骤二</bxs-step>
  <bxs-step>步骤三</bxs-step>
  <bxs-step>最多五字</bxs-step>
</bxs-steps>
```
```js
export default {
    data() {
        return {
            type: 'tail',
            active: 2
        }
    }
}
```

#### 燕尾型-自定义颜色
```html
<bxs-steps :type="type" :active="active" :active-color="activeColor" :active-bg-color="activeBgColor">
  <bxs-step>步骤一</bxs-step>
  <bxs-step>步骤二</bxs-step>
  <bxs-step>步骤三</bxs-step>
  <bxs-step>步骤四</bxs-step>
  <bxs-step>最多四字</bxs-step>
</bxs-steps>
```
```js
export default {
    data() {
        return {
            type: 'tail',
            active: 3,
            activeColor: '#fff',
            activeBgColor: '#f50'
        }
    }
}
```

## steps Attribute
| 参数| 说明 | 类型 | 默认值 |
| --- | --- | --- |  --- |
| type | 可选，步骤类型。horizontal \ tail | String | horizontal |
| active | 当前步骤 | Number | 0 |
| active-color | 可选，激活状态颜色 | String | #508CEE |
| active-bg-color | 可选，tail类型。激活状态下的背景色 | String | #F2F7FF |

## step Attribute
| 参数| 说明 | 类型 | 默认值 |
| --- | --- | --- |  --- |
| description | 可选，步骤描述 | String | - |
| status | 可选，步骤状态。error | String | - |



### Slot
无

### Event
无
