<template>
  <div class="page-navbar">
    <co-header fixed title="Navbar">
      <fallback slot="left"></fallback>
    </co-header>

    <div class="co-wrapper">
      <p style="padding: 8px 10px;">没有横向滚动条-页签</p>
      <co-navbar class="page-part page-content-main" v-model="selected">
        <co-tab-item id="1">选项一</co-tab-item>
        <co-tab-item id="2">选项二</co-tab-item>
        <co-tab-item id="3">选项三</co-tab-item>
        <co-tab-item id="4">选项四</co-tab-item>
        <co-tab-item id="5">选项五</co-tab-item>
      </co-navbar>
      <p style="padding: 8px 10px;">支持横向滚动条-页签</p>
      <co-navbar class="page-part page-content-main co-transverse-scroll" v-model="selected">
        <div class="co-scroll" :style="{width: 'calc(100vw / 4 * 5)'}">
          <co-tab-item id="1">选项一</co-tab-item>
          <co-tab-item id="2">选项二</co-tab-item>
          <co-tab-item id="3">选项三</co-tab-item>
          <co-tab-item id="4">选项四</co-tab-item>
          <co-tab-item id="5">选项五</co-tab-item>
        </div>
      </co-navbar>

      <div>
        <co-cell class="page-part" title="当前选中">{{ selected }}</co-cell>
      </div>

      <co-tab-container :swipeable="true" v-model="selected">
        <co-tab-container-item id="1">
          <co-cell v-for="n in 10" :title="'选项一：' + n" :key='n'></co-cell>
        </co-tab-container-item>
        <co-tab-container-item id="2">
          <co-cell v-for="n in 4" :title="'选项二：' + n" :key='n'></co-cell>
        </co-tab-container-item>
        <co-tab-container-item id="3">
          <co-cell v-for="n in 6" :title="'选项三：' + n" :key='n'></co-cell>
        </co-tab-container-item>
        <co-tab-container-item id="4">
          <co-cell v-for="n in 6" :title="'选项四：' + n" :key='n'></co-cell>
        </co-tab-container-item>
        <co-tab-container-item id="5">
          <co-cell v-for="n in 6" :title="'选项五：' + n" :key='n'></co-cell>
        </co-tab-container-item>
      </co-tab-container>
    </div>
  </div>
</template>

<script type="es6">
export default {
  name: 'page-navbar',

  data() {
    return {
      selected: '1',
      data: [
        {
          'id': '1',
          'text': '选项1'
        },
        {
          'id': '2',
          'text': '选项2'
        },
        {
          'id': '3',
          'text': '选项3'
        }
      ]
    };
  }
};
</script>
