mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[new feature] Steps: add active-icon prop (#2934)
This commit is contained in:
neverland
GitHub
parent
144fa2d711
commit
cca584e9d5
@ -24,7 +24,7 @@ export default sfc({
|
||||
|
||||
render(h) {
|
||||
const { status } = this;
|
||||
const { activeColor, direction } = this.$parent;
|
||||
const { activeIcon, activeColor, direction } = this.$parent;
|
||||
const titleStyle = status === 'process' && { color: activeColor };
|
||||
|
||||
return (
|
||||
@ -36,7 +36,7 @@ export default sfc({
|
||||
{status !== 'process' ? (
|
||||
<i class={bem('circle')} />
|
||||
) : (
|
||||
<Icon name="checked" style={{ color: activeColor }} />
|
||||
<Icon name={activeIcon} style={{ color: activeColor }} />
|
||||
)}
|
||||
</div>
|
||||
<div class={bem('line')} />
|
||||
|
||||
@ -11,11 +11,23 @@
|
||||
<van-button @click="nextStep">{{ $t('nextStep') }}</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customStyle')">
|
||||
<van-steps
|
||||
:active="active"
|
||||
active-icon="success"
|
||||
active-color="#38f"
|
||||
>
|
||||
<van-step>{{ $t('step1') }}</van-step>
|
||||
<van-step>{{ $t('step2') }}</van-step>
|
||||
<van-step>{{ $t('step3') }}</van-step>
|
||||
<van-step>{{ $t('step4') }}</van-step>
|
||||
</van-steps>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-steps
|
||||
:active="0"
|
||||
direction="vertical"
|
||||
active-color="#f44"
|
||||
>
|
||||
<van-step>
|
||||
<h3>{{ $t('status1') }}</h3>
|
||||
@ -47,7 +59,8 @@ export default {
|
||||
title3: '竖向步骤条',
|
||||
status1: '【城市】物流状态1',
|
||||
status2: '【城市】物流状态',
|
||||
status3: '快件已发货'
|
||||
status3: '快件已发货',
|
||||
customStyle: '自定义样式'
|
||||
},
|
||||
'en-US': {
|
||||
nextStep: 'Next Step',
|
||||
@ -59,7 +72,8 @@ export default {
|
||||
title3: 'Vertical Steps',
|
||||
status1: '【City】Status1',
|
||||
status2: '【City】Status2',
|
||||
status3: '【City】Status3'
|
||||
status3: '【City】Status3',
|
||||
customStyle: 'Custom Style'
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -30,10 +30,25 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
#### Custom Style
|
||||
|
||||
```html
|
||||
<van-steps
|
||||
:active="active"
|
||||
active-icon="success"
|
||||
active-color="#38f"
|
||||
>
|
||||
<van-step>Step1</van-step>
|
||||
<van-step>Step2</van-step>
|
||||
<van-step>Step3</van-step>
|
||||
<van-step>Step4</van-step>
|
||||
</van-steps>
|
||||
```
|
||||
|
||||
#### Vertical Steps
|
||||
|
||||
```html
|
||||
<van-steps direction="vertical" :active="0" active-color="#f44">
|
||||
<van-steps direction="vertical" :active="0">
|
||||
<van-step>
|
||||
<h3>【City】Status1</h3>
|
||||
<p>2016-07-12 12:40</p>
|
||||
@ -58,7 +73,8 @@ export default {
|
||||
| icon-class | Icon class | `String` | - |
|
||||
| title | Title | `String` | - |
|
||||
| description | Description | `String` | - |
|
||||
| direction | Can be set to `horizontal` `vertical` | `String` | `horizontal` |
|
||||
| direction | Can be set to `vertical` | `String` | `horizontal` |
|
||||
| active-icon | Active icon name | `String` | `checked` |
|
||||
| active-color | Active step color | `String` | `#07c160` |
|
||||
|
||||
### Steps Slot
|
||||
|
||||
@ -18,6 +18,10 @@ export default sfc({
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: GREEN
|
||||
},
|
||||
activeIcon: {
|
||||
type: String,
|
||||
default: 'checked'
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -29,15 +29,42 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div> <button class="van-button van-button--default van-button--normal"><span class="van-button__text">下一步</span></button>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-steps van-steps--horizontal">
|
||||
<div class="van-steps__items van-steps__items--alone">
|
||||
<div class="van-hairline van-step van-step--horizontal van-step--finish">
|
||||
<div class="van-step__title">买家下单</div>
|
||||
<div class="van-step__circle-container"><i class="van-step__circle"></i></div>
|
||||
<div class="van-step__line"></div>
|
||||
</div>
|
||||
<div class="van-hairline van-step van-step--horizontal van-step--process">
|
||||
<div class="van-step__title" style="color:#38f;">商家接单</div>
|
||||
<div class="van-step__circle-container"><i class="van-icon van-icon-success" style="color:#38f;">
|
||||
<!----></i></div>
|
||||
<div class="van-step__line"></div>
|
||||
</div>
|
||||
<div class="van-hairline van-step van-step--horizontal">
|
||||
<div class="van-step__title">买家提货</div>
|
||||
<div class="van-step__circle-container"><i class="van-step__circle"></i></div>
|
||||
<div class="van-step__line"></div>
|
||||
</div>
|
||||
<div class="van-hairline van-step van-step--horizontal">
|
||||
<div class="van-step__title">交易完成</div>
|
||||
<div class="van-step__circle-container"><i class="van-step__circle"></i></div>
|
||||
<div class="van-step__line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-steps van-steps--vertical">
|
||||
<div class="van-steps__items van-steps__items--alone">
|
||||
<div class="van-hairline van-step van-step--vertical van-step--process">
|
||||
<div class="van-step__title" style="color:#f44;">
|
||||
<div class="van-step__title" style="color:#07c160;">
|
||||
<h3>【城市】物流状态1</h3>
|
||||
<p>2016-07-12 12:40</p>
|
||||
</div>
|
||||
<div class="van-step__circle-container"><i class="van-icon van-icon-checked" style="color:#f44;">
|
||||
<div class="van-step__circle-container"><i class="van-icon van-icon-checked" style="color:#07c160;">
|
||||
<!----></i></div>
|
||||
<div class="van-step__line"></div>
|
||||
</div>
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user