全部产品
云市场

步骤条(steps)

更新时间:2020-03-26 11:53:26

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

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

items 属性详细描述:

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