全部产品

步骤条(steps)

本文介绍根据步骤显示的进度条(steps)。

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

items 属性详细描述:

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

代码示例

  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. });