@wines/step

@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

名称	描述
wux-class	根节点样式类

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

名称	描述
wux-class	根节点样式类