Steps 步骤条

引导用户按照流程完成任务的导航条

何时使用

当任务复杂或者存在先后关系时,将其分解成一系列步骤,从而简化任务

代码示例

基本使用

属性

Steps

属性类型必填默认值说明
indexnumber0当前步骤, 受控
direction'horizontal' | 'vertical''horizontal'方向
uidstring-当页面有多个Steps时需传入,必须页面唯一,与内部的 StepItem 组件的 uid 一致
classNamestring-类名

StepItem

属性类型必填默认值说明
indexnumber-小程序必填,用于标记当前是第几步,必须按顺序递增
titlestring | slot-标题
descstring | slot-补充信息
failbooleanfalse是否失败步骤
iconstring | slot-图标,横向和纵向都有各自的默认图标
activeIconstring | slot-激活步骤图标,横向和纵向都有各自的默认图标
failIconstring | slot-失败步骤图标,横向和纵向都有各自的默认图标
uidstring-当页面有多个Steps时需传入,必须页面唯一,与外部的 Steps 组件的 uid 一致
classNamestring-类名

插槽

StepItem

名称说明
title标题内容插槽
desc补充内容插槽
icon默认图标插槽
activeIcon激活步骤图标插槽
failIcon失败步骤图标插槽

样式类

Steps

类名说明
amd-steps整体样式
amd-steps-horizontal整体样式
amd-steps-vertical整体样式

StepItem

类名说明
amd-steps-item整体样式
amd-steps-item-horizontal整体样式
amd-steps-item-vertical整体样式
amd-steps-item-line步骤条样式
amd-steps-item-line-fail错误步骤条样式
amd-steps-item-icon图标样式
amd-steps-item-text文字区域样式
amd-steps-item-title标题样式
amd-steps-item-desc补充说明样式