Steps

步骤条。

示例
默认用法
  1. <nut-steps 
  2. stepsId="step1"
  3. >
  4.   <nut-step 
  5.    stepTitle="您的订单已经发往北京"
  6.   ><p>2017-12-12</p></nut-step>
  7.   <nut-step 
  8.   stepTitle="您的订单已经到达上海"
  9.   ><p>2017-12-11</p></nut-step>
  10.   <nut-step 
  11.   stepTitle="快递公司已揽件"
  12.   ><p>2017-12-10</p></nut-step>
  13. </nut-steps>

可配置活动数值，显示进度数字以及title具体每个进度条的高度
  1. <nut-steps 
  2. stepsId="step2" 
  3. :active="2" 
  4. :showNum="true"
  5. :titleTop="0.4"
  6. >
  7.   <nut-step 
  8.   stepTitle="您的订单已经发往北京"
  9.   ><p>2017-12-12</p></nut-step>
  10.   <nut-step 
  11.   stepTitle="您的订单已经到达上海"
  12.   ><p>2017-12-11</p></nut-step>
  13.   <nut-step 
  14.   stepTitle="快递公司已揽件"
  15.   ><p>2017-12-10</p></nut-step>
  16. </nut-steps>

可以设置进度条为图片
  1. <nut-steps 
  2. stepsId="step3" 
  3. :active="1"
  4. >
  5.   <nut-step 
  6.   stepTitle="您的订单已经发往北京" 
  7.   icon="图片地址1"
  8.   ><p>2017-12-12</p></nut-step>
  9.   <nut-step 
  10.   stepTitle="您的订单已经到达上海" 
  11.   icon="图片地址2"
  12.   ><p>2017-12-11</p></nut-step>
  13.   <nut-step 
  14.   stepTitle="快递公司已揽件" 
  15.   icon="图片地址2"
  16.   ><p>2017-12-10</p></nut-step>
  17. </nut-steps>

Props
参数说明类型默认值可选值
stepsId当同一页面有多个进度条时，需设置每个进度条组件单独的stepsId，如只有一个进度条组件，则无需设置该属性String''—
stepTitle每个进度条的标题string——
active每个进度条组件激活的个数Number0—
showNum是否显示进度条左侧的数字booleanfalsetrue/false
titleTop进度条标题距离顶部的距离，单位为remNumber0.3—
icon左侧进度条的图片地址String——