Steps 步骤条

引入

在或index.json中引入组件，详细介绍见快速上手。

基础用法

  1. <van-steps steps="{{ steps }}" active="{{ active }}" />
  1. <van-steps
  2.   steps="{{ steps }}"
  3.   active="{{ active }}"
  4.   active-color="#38f"
  5. />

自定义图标

可以通过 inactiveIcon 和 activeIcon 属性分别设置每一项的图标。

  1. Page({
  2.   data: {
  3.     steps: [
  5.         text: '步骤一',
  6.         desc: '描述信息',
  7.         inactiveIcon: 'location-o',
  8.         activeIcon: 'success',
  9.       },
  10.       {
  11.         text: '步骤二',
  12.         desc: '描述信息',
  13.         inactiveIcon: 'like-o',
  14.       },
  15.       {
  16.         text: '步骤三',
  17.         desc: '描述信息',
  18.         inactiveIcon: 'star-o',
  20.       },
  21.       {
  22.         text: '步骤四',
  23.         desc: '描述信息',
  24.         inactiveIcon: 'phone-o',
  25.         activeIcon: 'fail',
  26.       },
  27.     ],
  28.   },

竖向步骤条

API

Events

外部样式类