移动开发平台 mPaaS 步骤条（steps）

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

属性名	类型	默认值	描述	必选
className	String	–	最外层覆盖样式。	false
activeIndex	Number	1	当前激活步骤。	true
failIndex	Number	0	当前失败步骤（只在 vertical 模式下生效）。	false
direction	String	horizontal	显示方向，可选值：`vertical`、`horizontal`。	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

代码示例

  
   {
    "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',
    }]
    }
   });

代码示例

发表回复 取消回复

发表回复取消回复