text: <style lang="css">
  @import '/zanui/panel.wxss';
  @import '/zanui/cell.wxss';
  .my-class {
    padding: 10px;
  }
  .my-class .zan-steps__step--done {
    color: #f44;
  }
  </style>
  
  <template>
    <view class="container">
  
      <view class="doc-title zan-hairline--bottom">STEPS</view>
  
      <view class="zan-panel">
        <view class="zan-cell">
          <view class="zan-cell__bd">
            <zanSteps1 type="horizon" :steps="steps"></zanSteps1>
          </view>
        </view>
  
        <view class="zan-cell">
          <view class="zan-cell__bd">
            <zanSteps2 type="horizon" :steps="steps2"></zanSteps2>
          </view>
        </view>
  
        <view class="zan-cell zan-cell--last-child">
          <view class="zan-cell__bd">
            <zanSteps3 type="horizon" :steps="steps3"></zanSteps3>
          </view>
        </view>
      </view>
  
      <view class="zan-panel-title">有描述的steps</view>
      <view class="zan-panel">
        <view class="zan-cell">
          <view class="zan-cell__bd">
            <zanSteps4 type="horizon" :hasDesc="_true" :steps="steps"></zanSteps4>
          </view>
        </view>
  
        <view class="zan-cell">
          <view class="zan-cell__bd">
            <zanSteps5 type="horizon" :hasDesc="_true" :steps="steps2"></zanSteps5>
          </view>
        </view>
  
        <view class="zan-cell zan-cell--last-child">
          <view class="zan-cell__bd">
            <zanSteps6 type="horizon" :hasDesc="_true" :steps="steps3"></zanSteps6>
          </view>
        </view>
      </view>
  
      <view class="zan-panel-title">垂直方向的steps</view>
      <view class="zan-panel">
        <view class="zan-cell zan-cell">
          <view class="zan-cell__bd">
            <zanSteps7 type="vertical" :hasDesc="_true" :steps="steps"></zanSteps7>
          </view>
        </view>
  
        <view class="zan-cell zan-cell--last-child">
          <view class="zan-cell__bd">
            <zanSteps8 type="vertical" :steps="steps"></zanSteps8>
          </view>
        </view>
      </view>
  
      <view class="zan-panel-title">可自定义class</view>
      <view class="zan-panel">
        <view class="zan-cell__bd">
          <zanSteps9 type="vertical" :steps="steps" className='my-class'></zanSteps9>
        </view>
      </view>
  
    </view>
  </template>
  
  <script>
  import wepy from 'wepy'
  import zanSteps from '../components/zan-steps'
  
  export default class Steps extends wepy.page {
    config = {
      navigationBarTitleText: 'Steps 步骤条'
    }
    components = {
      zanSteps1: zanSteps,
      zanSteps2: zanSteps,
      zanSteps3: zanSteps,
      zanSteps4: zanSteps,
      zanSteps5: zanSteps,
      zanSteps6: zanSteps,
      zanSteps7: zanSteps,
      zanSteps8: zanSteps,
      zanSteps9: zanSteps
    }
    data = {
      _true: true,
      steps: [
        {
          current: true,
          done: true,
          text: '步骤一',
          desc: '10.01'
        },
        {
          done: false,
          current: false,
          text: '步骤二',
          desc: '10.02'
        },
        {
          done: false,
          current: false,
          text: '步骤三'
        }
      ],
      steps2: [
        {
          current: false,
          done: true,
          text: '步骤一',
          desc: '10.01'
        },
        {
          done: true,
          current: true,
          text: '步骤二',
          desc: '10.02'
        },
        {
          done: false,
          current: false,
          text: '步骤三',
          desc: '10.03'
        }
      ],
      steps3: [
        {
          current: false,
          done: true,
          text: '步骤一',
          desc: '10.01'
        },
        {
          done: true,
          current: false,
          text: '步骤二',
          desc: '10.02'
        },
        {
          done: true,
          current: true,
          text: '步骤三',
          desc: '10.03'
        }
      ]
    }
    methods = {}
    onLoad() {}
  }
  </script>
  