<demo-block title="基础用法">
  <van-tabs active="{{ 1 }}" bind:change="onChange">
    <van-tab
      wx:for="{{ tabs4 }}"
      wx:key="index"
      title="{{ '标签 ' + item }}"
    >
      <view class="content">
        {{ '内容' + item }}
      </view>
    </van-tab>
  </van-tabs>
</demo-block>

<demo-block title="通过名称匹配">
  <van-tabs active="b">
    <van-tab
      wx:for="{{ tabsWithName }}"
      wx:key="index"
      name="{{ item.name }}"
      title="{{ '标签 ' + item.index }}"
    >
      <view class="content">
        {{ '内容' + item.index}}
      </view>
    </van-tab>
  </van-tabs>
</demo-block>

<demo-block title="横向滚动">
  <van-tabs>
    <van-tab
      wx:for="{{ tabs6 }}"
      wx:key="index"
      title="{{ '标签 ' + item }}"
    >
      <view class="content">
        {{ '内容' + item }}
      </view>
    </van-tab>
  </van-tabs>
</demo-block>

<demo-block title="禁用标签">
  <van-tabs bind:disabled="onClickDisabled">
    <van-tab
      wx:for="{{ tabs3 }}"
      wx:key="index"
      disabled="{{ index === 1 }}"
      title="{{ '标签 ' + item }}"
    >
      <view class="content">
        {{ '内容' + item }}
      </view>
    </van-tab>
  </van-tabs>
</demo-block>

<demo-block title="样式风格">
  <van-tabs type="card" tab-class="special-tab">
    <van-tab
      wx:for="{{ tabs3 }}"
      wx:key="index"
      title="{{ '标签 ' + item }}"
    >
      <view class="content-2">
        {{ '内容' + item }}
      </view>
    </van-tab>
  </van-tabs>
</demo-block>

<demo-block title="点击事件">
  <van-tabs bind:click="onClick">
    <van-tab
      wx:for="{{ tabs2 }}"
      wx:key="index"
      title="{{ '标签 ' + item }}"
    >
      <view class="content">
        {{ '内容' + item }}
      </view>
    </van-tab>
  </van-tabs>
</demo-block>

<demo-block title="粘性布局">
  <van-tabs sticky>
    <van-tab
      wx:for="{{ tabs4 }}"
      wx:key="index"
      title="{{ '标签 ' + item }}"
    >
      <view class="content">
        {{ '内容' + item }}
      </view>
    </van-tab>
  </van-tabs>
</demo-block>

<demo-block title="切换动画">
  <van-tabs animated>
    <van-tab
      wx:for="{{ tabs4 }}"
      wx:key="index"
      title="{{ '标签 ' + item }}"
    >
      <view class="content">
        {{ '内容' + item }}
      </view>
    </van-tab>
  </van-tabs>
</demo-block>

<demo-block title="滑动切换">
  <van-tabs swipeable>
    <van-tab
      wx:for="{{ tabs4 }}"
      wx:key="index"
      title="{{ '标签 ' + item }}"
    >
      <view class="content">
        {{ '内容' + item }}
      </view>
    </van-tab>
  </van-tabs>
</demo-block>

<demo-block title="自定义标题">
  <van-tabs active="{{ 1 }}" bind:change="onChange" tab-class="special-tab" tab-active-class="special-tab-active">
    <van-icon
      slot="nav-right"
      name="search"
      custom-class="right-nav"
      bind:click="onClickNavRight"
    />
    <van-tab
      wx:for="{{ tabs4 }}"
      wx:key="index"
      title="{{ '标签 ' + item }}"
      dot="{{ index === 1 }}"
      info="{{ index === 2 ? 99 : null }}"
    >
      <view class="content">
        {{ '内容' + item }}
      </view>
    </van-tab>
  </van-tabs>
</demo-block>