Steps 步骤条 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用

显示一个任务的进度；或者引导用户完成某个复杂任务。

规则

应用在离散和时间较长的进度显示，eg：转账进度；如果任务是连续和短暂的，应该使用 Progress 来显示，eg：打开页面。
当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务，eg：用户注册新账号。

引入方式

数字生活小程序工程中，不需要 import，直接使用组件标签即可。

import {Steps, Step} from '@21cnfe/vui'  
Vue.component('Steps', Steps)  
Vue.component('Step', Step)

代码演示

steps 步骤条 steps

基本用法 title、icon和description为描述属性，current属性设置当前步骤进度。

<Steps :current="1">
  <Step title="已完成" icon="check-circle" description="这是描述" />
  <Step title="进行中" icon="question-circle" description="这是描述" />
  <Step title="未进行" icon="question-circle" description="这是描述" />
</Steps>

竖向用法通过设置 direction 属性为 vertical 将步骤条设置为竖向。

<Steps :current="1" direction="vertical">
  <Step title="已完成" icon="question-circle" description="这是描述" />
  <Step title="进行中" icon="question-circle" description="这是描述" />
  <Step title="未进行" icon="question-circle" description="这是描述" />
</Steps>

Node类型步骤条通过设置type为node以及size为samll。

<Steps :current="2" type="node" size="small">
  <Step title="第一步" thumb="https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg" finish_thumb="https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg"/>
  <Step title="第二步" thumb="https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg" finish_thumb="https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg"/>
  <Step title="第三步" thumb="https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg" finish_thumb="https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg"/>
  <Step title="第四步" thumb="https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg" finish_thumb="https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg"/>
  <Step title="第五步" thumb="https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg" finish_thumb="https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg"/>
</Steps>

API

Steps

整体步骤条。

属性	说明	类型	默认值
current	指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态	Number	`0`
size	尺寸，支持设置小尺寸`small`	String	`--`
status	指定当前步骤的状态，可选 `wait` `process` `finish` `error`	String	`process`
direction	step 方向样式	String，可选 `vertical` , `horizontal`	`vertical`

Steps.Step

步骤条内的每一个步骤。

属性	说明	类型	默认值
status	指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。	Enum { ‘wait’, ‘process’, ‘finish’, ‘error’ }	`wait`
title	标题	String	`--`
description	步骤的详情描述，可选	String	`--`
icon	步骤图标，可选	String（图标库图标type）	`--`
thumb	状态为wait时的图标	String	`--`
finish_thumb	状态为finish时的图标	String	`--`

1. Steps 步骤条 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

Steps 步骤条 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

规则

引入方式

代码演示

API

Steps

Steps.Step

Steps 步骤条 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用