<demo-block title="基础用法">
  <van-tabbar
    active="{{ active }}"
    data-key="active"
    custom-class="tabbar-position"
    safe-area-inset-bottom="{{ false }}"
    bind:change="onChange"
  >
    <van-tabbar-item icon="home-o">标签</van-tabbar-item>
    <van-tabbar-item icon="search">标签</van-tabbar-item>
    <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
    <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
  </van-tabbar>
</demo-block>

<demo-block title="通过名称匹配">
  <van-tabbar
    active="{{ active2 }}"
    data-key="active2"
    custom-class="tabbar-position"
    safe-area-inset-bottom="{{ false }}"
    bind:change="onChange"
  >
    <van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>
    <van-tabbar-item name="search" icon="search">标签</van-tabbar-item>
    <van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>
    <van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>
  </van-tabbar>
</demo-block>

<demo-block title="显示徽标">
  <van-tabbar
    active="{{ active3 }}"
    data-key="active3"
    custom-class="tabbar-position"
    safe-area-inset-bottom="{{ false }}"
    bind:change="onChange"
  >
    <van-tabbar-item icon="home-o">标签</van-tabbar-item>
    <van-tabbar-item icon="search" dot>标签</van-tabbar-item>
    <van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>
    <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
  </van-tabbar>
</demo-block>

<demo-block title="自定义图标">
  <van-tabbar
    active="{{ active4 }}"
    data-key="active4"
    custom-class="tabbar-position"
    safe-area-inset-bottom="{{ false }}"
    bind:change="onChange"
  >
    <van-tabbar-item info="3">
      <image
        slot="icon"
        src="{{ icon.normal }}"
        mode="aspectFit"
        style="width: 30px; height: 18px;"
      />
      <image
        slot="icon-active"
        src="{{ icon.active }}"
        mode="aspectFit"
        style="width: 30px; height: 18px;"
      />
      自定义
    </van-tabbar-item>
    <van-tabbar-item icon="search">标签</van-tabbar-item>
    <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
  </van-tabbar>
</demo-block>

<demo-block title="自定义颜色">
  <van-tabbar
    active="{{ active5 }}"
    data-key="active5"
    custom-class="tabbar-position"
    active-color="#07c160"
    inactive-color="#000"
    safe-area-inset-bottom="{{ false }}"
    bind:change="onChange"
  >
    <van-tabbar-item icon="home-o">标签</van-tabbar-item>
    <van-tabbar-item icon="search">标签</van-tabbar-item>
    <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
    <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
  </van-tabbar>
</demo-block>


<demo-block title="切换标签事件">
  <van-tabbar
    active="{{ active6 }}"
    data-key="active6"
    custom-class="tabbar-position"
    safe-area-inset-bottom="{{ false }}"
    bind:change="handleChange"
  >
    <van-tabbar-item icon="home-o">标签1</van-tabbar-item>
    <van-tabbar-item icon="search">标签2</van-tabbar-item>
    <van-tabbar-item icon="friends-o">标签3</van-tabbar-item>
    <van-tabbar-item icon="setting-o">标签4</van-tabbar-item>
  </van-tabbar>
</demo-block>
