<content-title describe="步骤条" name="Steps">
  <content-card name="基础用法" cardPadding="{{false}}">
    <l-steps active-index="{{activeIndex}}">
      <l-step title="已支付" describe="11:30" />
      <l-step title="备餐中" describe="12:30" />
      <l-step title="配送中" describe="13:30" />
    </l-steps>
    <view class="btn-container">
      <l-button l-class="button" bind:lintap="onPrevious">上一步</l-button>
      <l-button l-class="button" bind:lintap="onNext">下一步</l-button>
    </view>
  </content-card>

  <content-card name="步骤条元素类型" cardPadding="{{false}}">
    <l-steps dot active-index="1">
      <l-step title="已支付" describe="11:30" />
      <l-step title="备餐中" describe="12:30" />
      <l-step title="配送中" describe="13:30" />
    </l-steps>
  </content-card>

  <content-card name="步骤条方向" cardPadding="{{false}}">
    <l-steps direction="column" active-index="1">
      <l-step title="已支付" describe="11:30" />
      <l-step title="备餐中" describe="12:30" />
      <l-step title="配送中" describe="13:30" />
    </l-steps>
  </content-card>

  <content-card name="设置步骤条元素图标" cardPadding="{{false}}">
    <l-steps dot direction="column" active-index="1">
      <l-step icon="cart" title="已支付" describe="11:30" />
      <l-step title="备餐中" describe="12:30" />
      <l-step title="配送中" describe="13:30" />
    </l-steps>
  </content-card>

  <content-card name="设置步骤条元素状态" cardPadding="{{false}}">
    <l-steps status="error" active-index="1">
      <l-step title="已支付" describe="11:30" />
      <l-step title="备餐失败" describe="12:30" />
      <l-step title="配送中" describe="13:30" />
    </l-steps>
  </content-card>

  <content-card name="设置步骤条颜色" cardPadding="{{false}}">
    <l-steps color="#3d90f7" active-index="1">
      <l-step title="已支付" describe="11:30" />
      <l-step title="备餐中" describe="12:30" />
      <l-step title="配送中" describe="13:30" />
    </l-steps>
  </content-card>

  <content-card name="自定义步骤条元素" cardPadding="{{false}}">
    <l-steps>
      <l-step title="已支付" describe="11:30" />
      <l-step title="备餐中" describe="12:30" />
      <l-step custom title="已收货" describe="11:30">
        <view class="shou" slot="dot">收</view>
      </l-step>
    </l-steps>
  </content-card>

  <content-card name="自定义描述内容" cardPadding="{{false}}">
    <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>
  </content-card>

</content-title>

<l-toast/>