<van-tabs
  active="{{ active }}"
  color="#1989fa"
  bind:change="onSwitch"
>
  <van-tab title="用法示例" custom-class="demo-tab-pane">
    <demo-block title="基础用法">
      <van-col
        custom-class="col"
        span="6"
      >
        <van-icon
          name="{{ demoIcon }}"
          size="32px"
          custom-class="icon"
        />
      </van-col>
      <van-col
        custom-class="col"
        span="6"
      >
        <van-icon
          name="{{ demoImage }}"
          size="32px"
          custom-class="icon"
        />
      </van-col>
    </demo-block>
    <demo-block title="提示信息">
      <van-col
        custom-class="col"
        span="6"
      >
        <van-icon
          name="{{ demoIcon }}"
          size="32px"
          custom-class="icon"
          dot
        />
      </van-col>
      <van-col
        custom-class="col"
        span="6"
      >
        <van-icon
          name="{{ demoIcon }}"
          size="32px"
          custom-class="icon"
          info="9"
        />
      </van-col>
      <van-col
        custom-class="col"
        span="6"
      >
        <van-icon
          name="{{ demoIcon }}"
          size="32px"
          custom-class="icon"
          info="99+"
        />
      </van-col>
    </demo-block>
    <demo-block title="图标颜色">
      <van-col
        custom-class="col"
        span="6"
      >
        <van-icon
          name="{{ demoIcon }}"
          size="32px"
          custom-class="icon"
          color="#1989fa"
        />
      </van-col>
      <van-col
        custom-class="col"
        span="6"
      >
        <van-icon
          name="{{ demoIcon }}"
          size="32px"
          custom-class="icon"
          color="#07c160"
        />
      </van-col>
    </demo-block>
    <demo-block title="图标大小">
      <van-col
        custom-class="col"
        span="6"
      >
        <van-icon
          name="{{ demoIcon }}"
          size="40"
          custom-class="icon"
        />
      </van-col>
      <van-col
        custom-class="col"
        span="6"
      >
        <van-icon
          name="{{ demoIcon }}"
          size="3rem"
          custom-class="icon"
        />
      </van-col>
    </demo-block>
  </van-tab>
  <van-tab title="基础图标" custom-class="demo-tab-pane">
    <van-col
      wx:for="{{ icons.basic }}"
      wx:key="index"
      custom-class="col"
      span="6"
    >
      <van-icon
        name="{{ item }}"
        size="32px"
        custom-class="icon"
      />
      <view class="text">{{ item }}</view>
    </van-col>
  </van-tab>
  <van-tab title="线框风格" custom-class="demo-tab-pane">
    <van-col
      wx:for="{{ icons.outline }}"
      wx:key="index"
      custom-class="col"
      span="6"
    >
      <van-icon
        name="{{ item }}"
        size="32px"
        custom-class="icon"
      />
      <view class="text">{{ item }}</view>
    </van-col>
  </van-tab>
  <van-tab title="实底风格" custom-class="demo-tab-pane">
    <van-col
      wx:for="{{ icons.filled }}"
      wx:key="index"
      custom-class="col"
      span="6"
    >
      <van-icon
        name="{{ item }}"
        size="32px"
        custom-class="icon"
      />
      <view class="text">{{ item }}</view>
    </van-col>
  </van-tab>
</van-tabs>