安装

tnpm install --save @alipay/adc-steps

组件介绍

行业小程序步骤条组件,针对支付宝行业的各个不同场景进行定制化开发，满足业务需求。

参数说明

属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 --|:--:|:--:|:--:|:--: | :-: className | 否 | string | 自定义class样式 | '' | '' direction | 否 | string | 排列方向(row: 横向, column: 竖向) | row | row activeIcon | 否 | string | 激活icon的type(仅支持am-icon的图标) | check | check activeIconSize | 否 | number | 激活icon的大小 | 16 | 16 activeColor | 否 | string | 激活状态颜色 | #1aad19 | #1aad19 defaultIcon | 否 | string | 未激活icon的type(仅支持am-icon的图标, 当showDefaultIcon为true时才生效) | circle | circle errorIcon | 否 | string | 错误icon | close_ | close_ errorIndex | 否 | number | 错误icon的下标 | 0 | 1 errorColor | 否 | string | 错误文本的颜色 | #FF3B30 | #FF3B30 errorIconSize | 否 | number | 错误icon的大小 | 16 | 16 showDefaultIcon | 否 | boolean | 是否显示自定义的未激活icon | false | false defaultIconSize | 否 | number | 未激活icon的大小 | 12 | 12 defaultColor | 否 | string | 未激活状态颜色 | #999999 | #999999 active | 否 | number | 当前步骤 | 0 | 0 options | 是 | Array | 步骤列表(title: 标题, desc: 描述) | [] | [{ title: '步骤一', desc: '步骤一详细信息'}]

在小程序中使用

{
  "usingComponents": {
    "mas-adc-steps": "@alipay/adc-steps/es/index"
  }
}

在 page.axml 中引用组件

<!-- 页面使用方式 -->
    <mas-adc-steps options="{{ options }}" active="{{active}}" />

Badges

[![install size][install-size-image]][install-size-url]