Steps 步骤条

根据步骤显示的进度条。

扫码体验：
Steps 步骤条 - 图1

属性名描述类型默认值必选
className最外层覆盖样式Stringfalse
activeIndex当前激活步骤Number1true
failIndex当前失败步骤(只在vertical模式下生效)Number0false
direction显示方向，可选值：vertical、horizontalStringhorizontalfalse
size统一的icon大小，单位为pxNumber0false
items步骤详情Array[{title, description, icon, activeIcon, size}][]true

items属性详细描述

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

示例

  1. {
  2.   "usingComponents": {
  3.     "steps": "mini-antui/es/steps/index"
  4.   }
  5. }
  1. <steps 
  2.   activeIndex="{{activeIndex}}"
  3.   items="{{items}}"
  4. ></steps>
  1. Page({
  2.   data: {
  3.     activeIndex: 1,
  4.     items: [{
  5.       title: '步骤1',
  6.       description: '这是步骤1',
  7.     }, {
  8.       title: '步骤2',
  9.       description: '这是步骤2',
  10.     }, {
  11.       title: '步骤3',
  12.       description: '这是步骤3',
  13.     }]
  14.   }
  15. });

原文: https://docs.alipay.com/mini/component-ext/steps