1.5.1 • Published 1 year ago
@wines/step
Step 步骤条
显示一个任务的进度;或者引导用户完成某个复杂任务。
使用指南
在 page.json 中引入组件
{
"navigationBarTitleText": "Steps",
"usingComponents": {
"wux-step": "@wines/step",
"wux-steps": "@wines/steps",
"wux-button": "@wines/button"
}
}
示例
<view class="page">
<view class="page__hd">
<view class="page__title">Steps</view>
<view class="page__desc">步骤条</view>
</view>
<view class="page__bd">
<view class="sub-title">Default</view>
<wux-steps>
<wux-step status="finish" title="Finished" content="This is description" />
<wux-step status="process" title="In Progress" content="This is description" />
<wux-step status="wait" title="Waiting" content="This is description" />
</wux-steps>
<view class="sub-title">Direction = vertical</view>
<wux-steps direction="vertical">
<wux-step status="finish" title="Finished" content="This is description" />
<wux-step status="process" title="In Progress" content="This is description" />
<wux-step status="error" title="Error" content="This is description" />
</wux-steps>
<view class="sub-title">Current</view>
<wux-steps current="{{ current }}">
<wux-step title="First" />
<wux-step title="Second" />
<wux-step title="Third" />
</wux-steps>
<view class="button-sp-area">
<wux-button block type="light" bind:click="onClick">Next step</wux-button>
</view>
</view>
</view>
import './index.less';
Page({
data: {
current: 1,
},
onClick() {
const current = this.data.current + 1 > 2 ? 0 : this.data.current + 1;
this.setData({
current,
});
},
});
API
Steps props
参数 | 类型 | 描述 | 默认值 |
---|
prefixCls | string | 自定义类名前缀 | wux-steps |
current | number | 指定当前步骤,从 0 开始记数。在子 Step 元素中,可以通过 status 属性覆盖状态 | 0 |
direction | string | step 样式,可选值为 vertical、horizontal | horizontal |
Steps externalClasses
Step props
参数 | 类型 | 描述 | 默认值 |
---|
prefixCls | string | 自定义类名前缀 | wux-step |
status | string | 指定状态,可选值为 wait、process、finish、error。当不配置该属性时,会使用 Steps 的 current 来自动指定状态 | - |
title | string | 标题 | - |
content | string | 步骤的详情描述 | - |
icon | string | 步骤图标 | - |
Step slot
名称 | 描述 |
---|
title | 自定义标题 |
content | 自定义描述 |
Step externalClasses