51 lines
2.4 KiB
XML
51 lines
2.4 KiB
XML
<!-- 横向 -->
|
|
<view class="am-hor-steps {{className}}" a:if="{{direction == 'horizontal'}}">
|
|
<view class="am-hor-step" a:for="{{items}}" style="{{width: 100 / (items.length - 1) + '%'}}">
|
|
<view class="am-hor-step-line {{index < activeIndex - 1 ? 'is-active' : ''}} {{index >= items.length - 1 ? 'is-last' : ''}}">
|
|
<view class="am-hor-step-icon {{index <= activeIndex - 1 ? 'is-active' : ''}}"></view>
|
|
</view>
|
|
<view class="am-hor-step-text">
|
|
<view class="am-hor-step-title">
|
|
<text>{{item.title}}</text>
|
|
</view>
|
|
<view class="am-hor-step-description">
|
|
<text>{{item.description}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 纵向 -->
|
|
<view class="am-vertical-steps {{className}}" a:if="{{direction == 'vertical'}}">
|
|
<view class="am-vertical-step" a:for="{{items}}">
|
|
<view class="am-vertical-step-left">
|
|
<view
|
|
class="am-vertical-step-line am-vertical-step-line-top {{index < activeIndex ? 'is-active' : ''}}"
|
|
a:if="{{index < items.length - 1}}"
|
|
></view>
|
|
<view
|
|
class="am-vertical-step-line am-vertical-step-line-bottom {{index < activeIndex - 1 ? 'is-active' : ''}}"
|
|
a:if="{{index < items.length - 1}}"
|
|
></view>
|
|
<view class="am-vertical-step-icon is-fail" a:if="{{index == failIndex - 1}}">
|
|
<icon type="cancel" size="{{item.size || size || 24}}"/>
|
|
</view>
|
|
<view class="am-vertical-step-icon is-active" a:elif="{{index <= activeIndex - 1}}">
|
|
<image mode="widthFix" class="am-vertical-step-active-image" a:if="{{item.activeIcon}}" src="{{item.activeIcon}}" style="width: {{item.size || size || 24}}px;"/>
|
|
<icon a:else type="success" size="{{item.size || size || 24}}"/>
|
|
</view>
|
|
<view a:else>
|
|
<image mode="widthFix" class="am-vertical-step-icon am-vertical-step-image" a:if="{{item.icon}}" src="{{item.icon}}" style="width: {{item.size || size || 24}}px;"/>
|
|
<view class="am-vertical-step-icon is-normal" a:else style="width: {{item.size || size || 10}}px; height: {{item.size || size || 10}}px;"></view>
|
|
</view>
|
|
</view>
|
|
<view class="am-vertical-step-right">
|
|
<view class="am-vertical-step-title {{index <= activeIndex - 1 ? 'is-active' : ''}} {{index == failIndex - 1 ? 'is-fail' : ''}}">
|
|
<text>{{item.title}}</text>
|
|
</view>
|
|
<view class="am-vertical-step-description">
|
|
<text>{{item.description}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view> |