HUI

# Steps 步骤条

# Steps 概述

拆分某项流程的步骤，引导用户按流程完成任务。

# Steps 代码演示

# 基础用法

基本用法，组件会根据 current 自动判断各步骤状态。

# 迷你版

设置属性 size 为 small 启用迷你版。

# 带图标的步骤条

通过设置 Step 的 icon 属性可以自定义图标。

# 切换步骤

点击下一步按钮可以切换当前进度状态。

# 垂直方向

设置属性 direction 为 vertical 在垂直方向展示。

# 步骤运行错误

设置 Steps 的属性 status 为 error 指定当前步骤状态。

# 自定义状态图标

自定义各状态图标, 是否显示标记图标

# Steps API

# Steps props

属性 说明 类型 默认值
current 当前步骤，从 0 开始计数 Number 0
status 当前步骤的状态，可选值为 process、error String process
size 步骤条的尺寸，可选值为 small 或者不写 String -
direction 步骤条的方向，可选值为 horizontal （水平）或 vertical （垂直） String horizontal
processIcon 进行状态图标自定义设置[设置值参考iconfont](此属性仅在v1.0.13或以上版本有效) String -
waitIcon 未执行(等待)状态图标自定义设置[设置值参考iconfont](此属性仅在v1.0.13或以上版本有效) String -
finishIcon 完成状态图标自定义设置[设置值参考iconfont](此属性仅在v1.0.13或以上版本有效) String right
errorIcon 出错状态图标自定义设置[设置值参考iconfont](此属性仅在v1.0.13或以上版本有效) String close

# Step props

属性 说明 类型 默认值
status 步骤的状态，可选值为 wait、process、finish、error，不设置时自动判断 String process
title 标题 String 空
content 步骤的详细描述，可选 String -
icon 步骤的图标，可选 String -
isRemark 是否显示标记图标(此属性仅在v1.0.13或以上版本有效) Boolean false
remarkIcon 自定义标记图标[设置值参考iconfont](此属性仅在v1.0.13或以上版本有效) String alert

# Step events

事件名 说明 返回值
on-current-step 点击当前step节点后触发(此属性仅在v1.0.15或以上版本有效) 当前节点的索引Index(第几个节点)