步骤条 Steps

拆分某项流程的步骤，引导用户按流程完成任务。

步骤条包含 2 个组件： steps 、 step ，这两个组件必须同时在使用页面引入。

基础用法

step组件用于设置每一个步骤条元素的内容。

通过title和describe属性分别设置步骤条元素的标题和描述内容。

示例代码

<l-steps>
  <l-step title="已支付" describe="11:30"></l-step>
  <l-step title="备餐中" describe="11:30"></l-step>
  <l-step title="已出餐" describe="11:30"></l-step>
</l-steps>

设置步骤条进度

通过active-index设置初始步骤条进度。默认值为0。

示例代码

<l-steps active-index="1">
  <l-step title="已支付" describe="11:30"></l-step>
  <l-step title="备餐中" describe="11:30"></l-step>
  <l-step title="已出餐" describe="11:30"></l-step>
</l-steps>

设置步骤条方向及步骤条元素的最小高度

通过direction属性设置步骤条方向。可选值为row、column，默认为row。

在direction属性为column是可通过设置step-min-height属性更改步骤条元素的最小高度，该高度包括右侧内容高度，同时可撑高线的高度。默认为120，单位为rpx。

示例代码

<l-steps direction="column" step-min-height="160">
  <l-step title="已支付" describe="11:30"></l-step>
  <l-step title="备餐中" describe="11:30"></l-step>
  <l-step title="已出餐" describe="11:30"></l-step>
</l-steps>

设置步骤条排序

通过reverse属性为true可设置步骤条为倒序排列。默认为正序排列。

示例代码

<l-steps reverse="{{true}}" direction="column" step-min-height="160">
  <l-step title="已支付" describe="11:30"></l-step>
  <l-step title="备餐中" describe="11:30"></l-step>
  <l-step title="已出餐" describe="11:30"></l-step>
</l-steps>

设置步骤条状态

通过status属性设置步骤条当前选中元素的状态。可选值为process、error，默认为process。

示例代码

<l-steps active-index="1" status="error">
  <l-step title="已支付" describe="11:30"></l-step>
  <l-step title="备餐中" describe="11:30"></l-step>
  <l-step title="已出餐" describe="11:30"></l-step>
</l-steps>

点状步骤条

通过dot属性设置步骤条为点状步骤条。默认值为fasle。

示例代码

<l-steps dot="{{true}}">
  <l-step title="已支付" describe="11:30"></l-step>
  <l-step title="备餐中" describe="11:30"></l-step>
  <l-step title="已出餐" describe="11:30"></l-step>
</l-steps>

步骤条图标

通过icon属性设置步骤条元素的图标，仅在dot为true的条件下生效。

通过icon-size和icon-color属性设置步骤条元素的图标的大小和颜色。

示例代码

<l-steps dot="{{true}}">
  <l-step icon="cart" title="已支付" describe="11:30"></l-step>
  <l-step title="备餐中" describe="11:30"></l-step>
  <l-step title="已出餐" describe="11:30"></l-step>
</l-steps>

步骤条激活态颜色

通过color属性设置步骤条激活状态的颜色。

示例代码

<l-steps color="48a7e3">
  <l-step icon="cart" title="已支付" describe="11:30"></l-step>
  <l-step title="备餐中" describe="11:30"></l-step>
  <l-step title="已出餐" describe="11:30"></l-step>
</l-steps>

自定义（步骤条节点 || 描述内容）

通过设置插槽的slot为dot和describe分别自定义步骤条节点和描述内容，自定义步骤条节店内容需同时设置custom属性为true。

示例代码

<!-- 自定义步骤条节点 -->
<l-steps>
  <l-step title="已支付" describe="11:30" />
  <l-step title="备餐中" describe="12:30" />
  <l-step custom="{{true}}" title="已收货" describe="11:30">
    <view class="shou" slot="dot">收</view>
  </l-step>
</l-steps>
<!-- 自定义描述内容 -->
<l-steps direction="column" active-index="1">
  <l-step title="2019-9-25 11:30">
    <view class="describe-container" slot="describe">
      广大群众反映步骤条问题
    </view>
  </l-step>
  <l-step title="2019-10-05 12:30">
    <view class="describe-container" slot="describe">
      拾玖重构步骤条
    </view>
  </l-step>
  <l-step title="2019-10-25 13:30">
    <view class="describe-container" slot="describe">
      步骤条更新完成😄
    </view>
  </l-step>
</l-steps>

步骤条属性（Steps Attributes）

步骤条元素属性 (Step Attributes)

步骤条元素外部样式类 (Steps Class)

步骤条元素外部样式类 (Step Class)

步骤条元素插槽（Step Solt）