<commit_before><template>
  <div>
    <tab>
      <tab-item selected @on-item-click="onItemClick">已发货</tab-item>
      <tab-item @on-item-click="onItemClick">未发货</tab-item>
      <tab-item @on-item-click="onItemClick">全部订单</tab-item>
    </tab>
    <br/>
    <br/>
    <tab bar-position="top">
      <tab-item selected @on-item-click="onItemClick">已发货</tab-item>
      <tab-item @on-item-click="onItemClick">未发货</tab-item>
      <tab-item @on-item-click="onItemClick">全部订单</tab-item>
    </tab>
    <br/>
    <br/>
    <divider>手动切换</divider>
    <tab v-model="index01" prevent-default @on-before-index-change="switchTabItem">
      <tab-item selected>已发货</tab-item>
      <tab-item>未发货</tab-item>
      <tab-item>全部订单</tab-item>
    </tab>
    <br/>
    <br/>
    <divider>定义bar固定宽度</divider>
    <tab :line-width="1" custom-bar-width="60px">
      <tab-item selected>已发货</tab-item>
      <tab-item>未发货</tab-item>
      <tab-item>全部订单</tab-item>
    </tab>
    <br/>
    <br/>
    <divider>使用函数定义bar宽度</divider>
    <tab :line-width="1" :custom-bar-width="getBarWidth">
      <tab-item selected>AA</tab-item>
      <tab-item>AAAA</tab-item>
      <tab-item>AAAAAAA</tab-item>
    </tab>
    <br/>
    <br/>
    <br/>
    <divider>{{ $t('set bar-active-color')}}</divider>
    <tab bar-active-color="#668599" :line-width="1">
      <tab-item>已发货</tab-item>
      <tab-item selected>未发货</tab-item>
      <tab-item>全部订单</tab-item>
      <tab-item>全部订单</tab-item>
      <tab-item>全部订单</tab-item>
    </tab>

    <br/>
    <br/>
    <br/>
    <divider>different active class</divider>
    <tab :animate="false">
      <tab-item active-class="active-6-1">已发货</tab-item>
      <tab-item active-class="active-6-2" selected>未发货</tab-item>
      <tab-item active-class="active-6-3">全部订单</tab-item>
    </tab>
    <br/>
    <br/>
    <br/>
    <divider>no animation</divider>
    <tab :animate="false">
      <tab-item>已发货</tab-item>
      <tab-item selected>未发货</tab-item>
      <tab-item>全部订单</tab-item>
    </tab>
    <br/>
    <br/>
    <br/>
    <divider>disabled</divider>
    <tab>
      <tab-item selected>A</tab-item>
      <tab-item>B</tab-item>
      <tab-item disabled>Disabled</tab-item><commit_msg>Tab: add not full width demo<commit_after><template>
  <div>
    <tab>
      <tab-item selected @on-item-click="onItemClick">已发货</tab-item>
      <tab-item @on-item-click="onItemClick">未发货</tab-item>
      <tab-item @on-item-click="onItemClick">全部订单</tab-item>
    </tab>
    <br/>
    <br/>
    <tab bar-position="top">
      <tab-item selected @on-item-click="onItemClick">已发货</tab-item>
      <tab-item @on-item-click="onItemClick">未发货</tab-item>
      <tab-item @on-item-click="onItemClick">全部订单</tab-item>
    </tab>
    <br/>
    <br/>
    <divider>手动切换</divider>
    <tab v-model="index01" prevent-default @on-before-index-change="switchTabItem">
      <tab-item selected>已发货</tab-item>
      <tab-item>未发货</tab-item>
      <tab-item>全部订单</tab-item>
    </tab>
    <br/>
    <br/>
    <divider>定义bar固定宽度</divider>
    <tab :line-width="1" custom-bar-width="60px">
      <tab-item selected>已发货</tab-item>
      <tab-item>未发货</tab-item>
      <tab-item>全部订单</tab-item>
    </tab>
    <br/>
    <br/>
    <divider>使用函数定义bar宽度</divider>
    <tab :line-width="1" :custom-bar-width="getBarWidth">
      <tab-item selected>AA</tab-item>
      <tab-item>AAAA</tab-item>
      <tab-item>AAAAAAA</tab-item>
    </tab>
    <br/>
    <br/>
    <br/>
    <divider>{{ $t('set bar-active-color')}}</divider>
    <tab bar-active-color="#668599" :line-width="1">
      <tab-item>已发货</tab-item>
      <tab-item selected>未发货</tab-item>
      <tab-item>全部订单</tab-item>
      <tab-item>全部订单</tab-item>
      <tab-item>全部订单</tab-item>
    </tab>

    <br/>
    <br/>
    <br/>
    <divider>different active class</divider>
    <tab :animate="false">
      <tab-item active-class="active-6-1">已发货</tab-item>
      <tab-item active-class="active-6-2" selected>未发货</tab-item>
      <tab-item active-class="active-6-3">全部订单</tab-item>
    </tab>
    <br/>
    <br/>
    <br/>
    <divider>no animation</divider>
    <tab :animate="false">
      <tab-item>已发货</tab-item>
      <tab-item selected>未发货</tab-item>
      <tab-item>全部订单</tab-item>
    </tab>
    <br/>
    <br/>
    <br/>
    <divider>not full width</divider>
    <tab style="width: 80%;">
      <tab-item>已发货</tab-item>
      <tab-item selected>未发货</tab-item>
      <tab-item>全部订单</tab-item>
    </tab>
    <br/>
    <br/>
    <br/>
    <divider>disabled</divider>
    <tab>
      <tab-item selected>A</tab-item>
      <tab-item>B</tab-item>
      <tab-item disabled>Disabled</tab-item>
{'fraction_non_alphanumeric': 0.2122651695098251, 'fraction_numerical': 0.008637443316778234, 'mean_word_length': 2.503782148260212, 'pattern_counts': {'":': 0, '<': 238, '<?xml version=': 0, '>': 238, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 2, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3577802', 'n_tokens_mistral': 1963, 'n_tokens_neox': 2014, 'n_words': 240}