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

[improvement] Steps: 优化样式 (#835)

Browse Source
This commit is contained in:
Fyerl 2018-10-31 19:57:37 +08:00 committed by rex
parent ce6314cb28
commit 47c12a45d2
2 changed files with 29 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/steps/index.less
View File

@ -5,14 +5,21 @@
background-color: @white; background-color: @white;
&--horizontal { &--horizontal {
position: relative; padding: 10px;
display: flex;
overflow: hidden; .van-step__wrapper {
padding: 10px 10px 15px; position: relative;
display: flex;
overflow: hidden;
}
} }
&--vertical { &--vertical {
padding: 0 0 0 35px; padding-left: 10px;
.van-step__wrapper {
padding: 0 0 0 20px;
}
} }
} }
@ -49,7 +56,7 @@
&:last-child { &:last-child {
position: absolute; position: absolute;
right: 10px; right: 0;
width: auto; width: auto;
.van-step__title { .van-step__title {

30
packages/steps/index.wxml
View File

@ -1,18 +1,20 @@
<view class="custom-class van-steps van-steps--{{ direction }}"> <view class="custom-class van-steps van-steps--{{ direction }}">
<view <view class="van-step__wrapper">
wx:for="{{ steps }}" <view
wx:key="index" wx:for="{{ steps }}"
class="van-step van-hairline van-step--{{ direction }} {{ item.status ? 'van-step--' + item.status : '' }}" wx:key="index"
style="{{ width ? 'width:' + width + 'px' : '' }}" class="van-step van-hairline van-step--{{ direction }} {{ item.status ? 'van-step--' + item.status : '' }}"
> style="{{ width ? 'width:' + width + 'px' : '' }}"
<view class="van-step__title" style="{{ item.status === 'process' ? 'color: ' + activeColor : '' }}"> >
<view>{{ item.text }}</view> <view class="van-step__title" style="{{ item.status === 'process' ? 'color: ' + activeColor : '' }}">
<view>{{ item.desc }}</view> <view>{{ item.text }}</view>
<view>{{ item.desc }}</view>
</view>
<view class="van-step__circle-container">
<view class="van-step__circle" wx:if="{{ item.status !== 'process' }}" style="{{ item.status === 'finish' ? 'background-color: ' + activeColor : '' }}" />
<van-icon wx:else name="checked" color="{{ activeColor }}" custom-class="van-step__active" />
</view>
<view wx:if="{{ index !== steps.length - 1 }}" class="van-step__line" style="{{ item.status === 'finish' ? 'background-color: ' + activeColor : '' }}" />
</view> </view>
<view class="van-step__circle-container">
<view class="van-step__circle" wx:if="{{ item.status !== 'process' }}" style="{{ item.status === 'finish' ? 'background-color: ' + activeColor : '' }}" />
<van-icon wx:else name="checked" color="{{ activeColor }}" custom-class="van-step__active" />
</view>
<view wx:if="{{ index !== steps.length - 1 }}" class="van-step__line" style="{{ item.status === 'finish' ? 'background-color: ' + activeColor : '' }}" />
</view> </view>
</view> </view>