blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

feat(Steps): add inactive-color feature (#2497)

Browse Source 
* feat(Steps): add inactive-color new feature

* feat(Steps): add inactive-color new feature
This commit is contained in:
Lindy 2019-12-13 10:38:25 +08:00 committed by rex
parent 1d5afac75a
commit ee794b07fd
3 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/steps/README.md
View File

@ -79,6 +79,7 @@ Page({
| active | 当前步骤 | *number* | 0 | - | | active | 当前步骤 | *number* | 0 | - |
| direction | 显示方向，可选值为 `horizontal` `vertical` | *string* | `horizontal` | - | | direction | 显示方向，可选值为 `horizontal` `vertical` | *string* | `horizontal` | - |
| active-color | 激活状态颜色 | *string* | `#07c160` | - | | active-color | 激活状态颜色 | *string* | `#07c160` | - |
| inactive-color | 未激活状态颜色 | *string* | `#969799` | - |
| active-icon | 激活状态底部图标，可选值见 [Icon 组件](#/icon) | *string* | `checked` | - | | active-icon | 激活状态底部图标，可选值见 [Icon 组件](#/icon) | *string* | `checked` | - |
| inactive-icon | 未激活状态底部图标，可选值见 [Icon 组件](#/icon) | *string* | - | - | | inactive-icon | 未激活状态底部图标，可选值见 [Icon 组件](#/icon) | *string* | - | - |

6
packages/steps/index.ts
View File

@ -1,5 +1,5 @@
import { VantComponent } from '../common/component'; import { VantComponent } from '../common/component';
import { GREEN } from '../common/color'; import { GREEN, GRAY_DARK } from '../common/color';
VantComponent({ VantComponent({
props: { props: {
@ -14,6 +14,10 @@ VantComponent({
type: String, type: String,
value: GREEN value: GREEN
}, },
inactiveColor: {
type: String,
value: GRAY_DARK
},
activeIcon: { activeIcon: {
type: String, type: String,
value: 'checked' value: 'checked'

9
packages/steps/index.wxml
View File

@ -6,6 +6,7 @@
wx:for="{{ steps }}" wx:for="{{ steps }}"
wx:key="index" wx:key="index"
class="{{ utils.bem('step', [direction, status(index, active)]) }} van-hairline" class="{{ utils.bem('step', [direction, status(index, active)]) }} van-hairline"
style="{{ status(index, active) === 'inactive' ? 'color: ' + inactiveColor: '' }}"
> >
<view class="van-step__title" style="{{ index === active ? 'color: ' + activeColor : '' }}"> <view class="van-step__title" style="{{ index === active ? 'color: ' + activeColor : '' }}">
<view>{{ item.text }}</view> <view>{{ item.text }}</view>
@ -15,14 +16,14 @@
<block wx:if="{{ index !== active }}"> <block wx:if="{{ index !== active }}">
<van-icon <van-icon
wx:if="{{ inactiveIcon }}" wx:if="{{ inactiveIcon }}"
color="#969799" color="{{ status(index, active) === 'inactive' ? inactiveColor: activeColor }}"
name="{{ inactiveIcon }}" name="{{ inactiveIcon }}"
custom-class="van-step__icon" custom-class="van-step__icon"
/> />
<view <view
wx:else wx:else
class="van-step__circle" class="van-step__circle"
style="{{ index < active ? 'background-color: ' + activeColor : '' }}" style="{{ 'background-color: ' + (index < active ? activeColor : inactiveColor) }}"
/> />
</block> </block>
@ -30,7 +31,7 @@
</view> </view>
<view <view
wx:if="{{ index !== steps.length - 1 }}" wx:if="{{ index !== steps.length - 1 }}"
class="van-step__line" style="{{ index < active ? 'background-color: ' + activeColor : '' }}" class="van-step__line" style="{{ 'background-color: ' + (index < active ? activeColor : inactiveColor) }}"
/> />
</view> </view>
</view> </view>
@ -44,7 +45,7 @@ function get(index, active) {
return 'process'; return 'process';
} }
return ''; return 'inactive';
} }
module.exports = get; module.exports = get;