全部产品

Steps 步骤条

步进样式能够很好的可视化呈现给用户当前的服务进度,并且能够对整个流程有更加清晰的了解。

类型

横向步进器

场景描述:适用于步骤描述比较简单的场景(例如步骤不需要描述,或者步骤通过2个字的词语可以描述清楚)。

规则:

  1. 标题不允许超过一行,原则上不允许超过自己进度范围以内区域(范围见标注)。
  2. 描述可以根据业务需要选择性添加,文字长度标准同标题

纵向步进器

场景描述:适用于步骤描述比较详细的场景(例如步骤描述超过6个中文字,或者有短句样式的内容描述)。

规则:

  1. 标题和描述不允许超过2行,超过后自动截断。
  2. 描述可以根据业务需要选择性添加。

用法

步骤数量:考虑到空间范围,步骤不能超过4步,至少2步。

失败标记:失败的步骤图标和文字会对应变为红色。

扫码体验

image.png

示例代码

{
  "usingComponents": {
    "steps": "mini-antui/es/steps/index"
  }
}

<steps 
  activeIndex="{{activeIndex}}"
  items="{{items}}"
></steps>

Page({
  data: {
    activeIndex: 1,
    items: [{
      title: '步骤1',
      description: '这是步骤1',
    }, {
      title: '步骤2',
      description: '这是步骤2',
    }, {
      title: '步骤3',
      description: '这是步骤3',
    }]
  }
});

属性

属性名描述类型默认值必填
className最外层覆盖样式。String-
activeIndex当前激活步骤。Number1
failIndex当前失败步骤(只在 vertical 模式下生效)。Number0
direction显示方向,可选值:vertical、horizontal。Stringhorizontal
size统一的 icon 大小,单位为 px。Number0
items步骤详情(详情请见下方表格)。Array[{title, description, icon, activeIcon, size}][]

items

属性名描述类型默认值必填
items.title步骤详情标题。String-
items.description步骤详情描述。String-
items.icon尚未到达步骤的 icon(只在 vertical 模式下生效)。String-
items.activeIcon已到达步骤的 icon(只在 vertical 模式下生效)。String-
items.size已到达步骤 icon 的图标大小,单位为 px(只在 vertical 模式下生效)。Number-