[new feature] Steps: add active-icon prop (#2934)

This commit is contained in:
neverland
2019-03-10 16:56:05 +08:00
committed by GitHub
parent 144fa2d711
commit cca584e9d5
6 changed files with 96 additions and 16 deletions
+26 -7
View File
@@ -30,11 +30,29 @@ export default {
}
```
#### 竖向步骤条
可以通过设置`direction`属性来改变步骤条的显示方式
#### 自定义样式
可以通过`active-icon`和`active-color`属性设置激活状态下的图标和颜色
```html
<van-steps direction="vertical" :active="0" active-color="#f44">
<van-steps
:active="active"
active-icon="success"
active-color="#38f"
>
<van-step>买家下单</van-step>
<van-step>商家接单</van-step>
<van-step>买家提货</van-step>
<van-step>交易完成</van-step>
</van-steps>
```
#### 竖向步骤条
可以通过设置`direction`属性来改变步骤条的显示方向
```html
<van-steps direction="vertical" :active="0">
<van-step>
<h3>【城市】物流状态1</h3>
<p>2016-07-12 12:40</p>
@@ -55,11 +73,12 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| active | 当前步骤 | `Number` | 0 | - |
| title | 描述栏标题 | `String` | - | - |
| description | 描述栏文字 | `String` | - | - |
| icon | 描述栏图标 | `String` | - | - |
| icon-class | 图标额外类名 | `String` | - | - |
| title | 顶部描述栏标题 | `String` | - | - |
| description | 顶部描述栏文字 | `String` | - | - |
| icon | 顶部描述栏图标 | `String` | - | - |
| icon-class | 顶部描述栏图标额外类名 | `String` | - | - |
| direction | 显示方向,可选值为 `vertical` | `String` | `horizontal` | - |
| active-icon | 激活状态底部图标,可选值见 Icon 组件 | `String` | `checked` | 1.6.9 |
| active-color | 激活状态颜色 | `String` | `#07c160` | - |
### Steps Slot