/**
* @Author think
* @Date 2020-08-25 15:46
*/

<template>
  <h-view title="tab">
    <h-header class="bar-custom">
      <h-return slot="left" @click.native="$routeGo()"/>
      <div slot="center">tab</div>
    </h-header>
    <h4>基础用法</h4>
    <s-tab>
      <tab-item>app</tab-item>
      <tab-item>vue</tab-item>
    </s-tab>
    <h4>自定义图标</h4>
    <s-tab>
      <tab-item><img src="@/assets/image/warning@2x.png"></tab-item>
      <tab-item><img src="@/assets/image/logo.png"></tab-item>
      <tab-item>angular</tab-item>
      <tab-item>react</tab-item>
    </s-tab>
    <h4>下边框和分割线</h4>
    <s-tab :has-border="true" :show-divider="true">
      <tab-item><img src="@/assets/image/warning@2x.png"></tab-item>
      <tab-item><img src="@/assets/image/logo.png"></tab-item>
      <tab-item>angular</tab-item>
      <tab-item>react</tab-item>
    </s-tab>
    <h4>默认显示及点击事件</h4>
    <s-tab :has-border="true" :show-divider="true" v-model="index" @tabClick="tabClick">
      <tab-item><img src="@/assets/image/warning@2x.png"></tab-item>
      <tab-item><img src="@/assets/image/logo.png"></tab-item>
      <tab-item>angular</tab-item>
      <tab-item>react</tab-item>
      <tab-item>ionic</tab-item>
      <tab-item>jquery</tab-item>
      <tab-item>react</tab-item>
    </s-tab>
  </h-view>
</template>

<script>
export default {
  name: 'Tab',
  data () {
    return {
      hasBorder: true,
      showDivider: true,
      index: 2,
    }
  },
  methods: {
    tabClick (index) {
      console.log(index)
    },
  },
}
</script>

<style scoped lang="less">
  img {
    height: 16px;
  }
</style>