Chapter 44無料公開

画面切り替え:タブ (Tabs): v-tab

超Lチカ団編集局
超Lチカ団編集局
2023.12.31に更新

画面切り替え:タブ (Tabs): v-tab

基本

v-tabs は画面切り替えなどに使える、タブ型のボタンが並んだコンポーネントです。切り替えボタンに相当するコンポーネントは v-tab で作成し、切り替える画面は v-window, v-window-item を使って作成します。v-tabsv-windowv-model に同じ変数を割り当てることで、v-tab の切り替えに連動して表示される v-window-item が切り替わるようになります。

tabs1.gif

<template>
  <v-container class="pa-2">
    <v-tabs
      v-model="tab"
    >
      <v-tab value="1">Item One</v-tab>
      <v-tab value="2">Item Two</v-tab>
      <v-tab value="3">Item Three</v-tab>
    </v-tabs>

    <v-window v-model="tab">
      <v-window-item value="1">
        <v-sheet
          color="red"
          height="400"
          tile
        >
          <h1 class="text-white">Window 1</h1>
        </v-sheet>
      </v-window-item>

      <v-window-item value="2">
        <v-sheet
          color="blue"
          height="400"
          tile
        >
          <h1 class="text-white">Window 2</h1>
        </v-sheet>
      </v-window-item>

      <v-window-item value="3">
        <v-sheet
          color="green"
          height="400"
          tile
        >
          <h1 class="text-white">Window 3</h1>
        </v-sheet>
      </v-window-item>
    </v-window>
  </v-container>
</template>
<script>
export default {
  data: () => ({
    tab: null,
  }),
}
</script>

下記の例は、切り替える画面の内容を別のコンポーネントとして作成した例です。画面の見た目自体は上の例と同じになります。

tabs1.gif

<template>
  <v-container class="pa-2">
    <v-tabs
      v-model="tab"
    >
      <v-tab value="1">Item One</v-tab>
      <v-tab value="2">Item Two</v-tab>
      <v-tab value="3">Item Three</v-tab>
    </v-tabs>

    <v-window v-model="tab">
      <v-window-item value="1"><HogePageA/></v-window-item>
      <v-window-item value="2"><HogePageB/></v-window-item>
      <v-window-item value="3"><HogePageC/></v-window-item>
    </v-window>
  </v-container>
</template>
<script>
import HogePageA from './components/HogePageA.vue';
import HogePageB from './components/HogePageB.vue';
import HogePageC from './components/HogePageC.vue';

export default {
  data: () => ({
    tab: 0
  }),
  components: {
    HogePageA,
    HogePageB,
    HogePageC,
  }
}
</script>

HogePageA.vue

<template>
    <v-sheet class="bg-red" height="400" tile>
        <h1 class="text-white">Window 1</h1>
    </v-sheet>
</template>

HogePageB.vue

<template>
    <v-sheet class="bg-blue" height="400" tile>
        <h1 class="text-white">Window 2</h1>
    </v-sheet>
</template>

HogePageC.vue

<template>
    <v-sheet class="bg-green" height="400" tile>
        <h1 class="text-white">Window 3</h1>
    </v-sheet>
</template>

画面の切り替え以外に使う

タブ自体は、単純に値を選ぶことのできるコンポーネントなので、画面の切り替え以外の目的にも使えます。ただ、この用途に使うのであれば、v-btn-toggle のほうが向いています。

tabs2.gif

<template>
  <v-container class="pa-2">
    <v-tabs
      v-model="tab"
    >
      <v-tab value="1">Item One</v-tab>
      <v-tab value="2">Item Two</v-tab>
      <v-tab value="3">Item Three</v-tab>
    </v-tabs>
    <h1>{{tab}}</h1>
  </v-container>
</template>
<script>
export default {
  data: () => ({
    tab: 0
  }),
}
</script>

ツールバーとの組み合わせ

v-toolbar と組み合わせると、タイトルやメニューのついたタブを作ることができます。v-toolbarv-slot:extension の中に v-tabs を配置します。v-app-bar との組み合わせも可能です。

image

<template>
  <v-container class="pa-2">
    <v-toolbar title="Application" color="black" extended>
      <v-spacer></v-spacer>
      <v-btn icon="mdi-home"></v-btn>
      <v-btn icon="mdi-dots-vertical"></v-btn>
      <template v-slot:extension>
        <v-tabs v-model="tab">
          <v-tab value="1">Item One</v-tab>
          <v-tab value="2">Item Two</v-tab>
          <v-tab value="3">Item Three</v-tab>
        </v-tabs>
      </template>
    </v-toolbar>

    <v-window v-model="tab">
      <v-window-item value="1">
        <v-sheet color="red" height="400" tile>
          <h1 class="text-white">Window 1</h1>
        </v-sheet>
      </v-window-item>

      <v-window-item value="2">
        <v-sheet color="blue" height="400" tile>
          <h1 class="text-white">Window 2</h1>
        </v-sheet>
      </v-window-item>

      <v-window-item value="3">
        <v-sheet color="green" height="400" tile>
          <h1 class="text-white">Window 3</h1>
        </v-sheet>
      </v-window-item>
    </v-window>
  </v-container>
</template>
<script>
export default {
  data: () => ({
    tab: null,
  }),
}
</script>

色の指定

v-tabscolor prop で選択されたタブのテキストの色を, bg-color props でタブの背景色を指定できます。

image

<template>
  <v-container class="pa-2">
    <v-tabs color="blue-darken-4" bg-color="lime-lighten-4">
      <v-tab value="1">Item One</v-tab>
      <v-tab value="2">Item Two</v-tab>
      <v-tab value="3">Item Three</v-tab>
    </v-tabs>
  </v-container>
</template>

v-card, v-toolbar などの子要素になっているときは、親要素の色の設定をそのまま引き継ぎます。その場合でも v-tabs で色を再度設定しなおすこともできます。

タブの位置

align-tabs prop を使うと、タブを寄せる方向(左右、中央)を設定できます。デフォルトは左寄せ (align-tabs="start") です。align-tabs="center" で中央寄せになります。

image

<template>
  <v-container class="pa-4 w-75">
    <v-tabs color="blue-darken-4" bg-color="lime-lighten-4" align-tabs="center">
      <v-tab value="1">Item One</v-tab>
      <v-tab value="2">Item Two</v-tab>
      <v-tab value="3">Item Three</v-tab>
    </v-tabs>
  </v-container>
</template>

右に寄せるには align-tabs="end"とします。

image

<template>
  <v-container class="pa-4 w-75">
    <v-tabs color="blue-darken-4" bg-color="lime-lighten-4" align-tabs="end">
      <v-tab value="1">Item One</v-tab>
      <v-tab value="2">Item Two</v-tab>
      <v-tab value="3">Item Three</v-tab>
    </v-tabs>
  </v-container>
</template>

アイコン付きタブ

v-icon でタブにアイコンを表示させること自体はできます。v-icon を単純に挿入すると、テキストと同じ列にアイコンが表示されます。

image

<template>
  <v-container class="pa-4 w-75">
    <v-tabs color="blue-darken-4" bg-color="lime-lighten-4">
      <v-tab value="1">
        <v-icon class="mx-1">mdi-phone</v-icon>
        Item One</v-tab>
      <v-tab value="2">
        <v-icon class="mx-1">mdi-heart</v-icon>
        Item Two
      </v-tab>
      <v-tab value="3">
        <v-icon class="mx-1">mdi-home</v-icon>
        Item Three
      </v-tab>
    </v-tabs>
  </v-container>
</template>

アイコンとテキストを別の行に表示させたいときは stacked prop を使用します。

image

<template>
  <v-container class="pa-4 w-75">
    <v-tabs color="blue-darken-4" bg-color="lime-lighten-4" stacked>
      <v-tab value="1">
        <v-icon>mdi-phone</v-icon>
        Item One</v-tab>
      <v-tab value="2">
        <v-icon>mdi-heart</v-icon>
        Item Two
      </v-tab>
      <v-tab value="3">
        <v-icon>mdi-home</v-icon>
        Item Three
      </v-tab>
    </v-tabs>
  </v-container>
</template>

タブの幅

fixed-tabs prop を使うと、タブの横幅が均等割りになります。

image

<template>
  <v-container class="pa-4 w-75">
    <v-tabs color="blue-darken-4" bg-color="lime-lighten-4" fixed-tabs>
      <v-tab value="1">pen</v-tab>
      <v-tab value="2">this is a pen.</v-tab>
      <v-tab value="3">this is a pen. That is a pencil.</v-tab>
    </v-tabs>
  </v-container>
</template>

grow prop を使うと、タブの中にあるテキストの長さに応じて、タブの幅が調整されます。

image

<template>
  <v-container class="pa-4 w-75">
    <v-tabs color="blue-darken-4" bg-color="lime-lighten-4" grow>
      <v-tab value="1">pen</v-tab>
      <v-tab value="2">this is a pen.</v-tab>
      <v-tab value="3">this is a pen. That is a pencil.</v-tab>
    </v-tabs>
  </v-container>
</template>

縦方向のタブ

direction prop を使用することで、縦方向のタブを作ることができます。

image

コード:

<template>
  <v-container class="pa-4 d-flex">
    
    <v-tabs
      v-model="tab"
      direction="vertical"
      bg-color="primary"
      color="yellow"
    >
      <v-tab :value="n" v-for="n in 5">Tab {{n}}</v-tab>
    </v-tabs>
    
    <v-card class="mx-4 py-3 w-50" color="green-lighten-4">
      <v-card-title class="text-h2">{{tab}}</v-card-title>
    </v-card>
    
  </v-container>
</template>
<script>
export default {
  data: () => ({
    tab: 0
  }),
}
</script>

タブの左右送り

タブの数が多くてバーの中に入りきらない時は、タブの端付近をクリックすることで、はみ出しているタブが表示されて選べるようになります。

image

<template>
  <v-container class="pa-4 w-50">
    
    <v-tabs
      v-model="tab"
      bg-color="primary"
      color="yellow"
    >
      <v-tab :value="n" v-for="n in 20">Tab {{n}}</v-tab>
    </v-tabs>
    
    <v-card class="my-3" height="200" color="green-lighten-4">
      <v-card-title class="text-h2">{{tab}}</v-card-title>
    </v-card>
    
  </v-container>
</template>
<script>
export default {
  data: () => ({
    tab: 0
  }),
}
</script>

center-active prop を使うと、選ばれたタブが可能な限り画面の中央に来るようになります。これを使うと、はみ出しているタブが多少選びやすくなります。

image

<template>
  <v-container class="pa-4 w-50">
    
    <v-tabs
      v-model="tab"
      bg-color="primary"
      color="yellow"
      center-active
    >
      <v-tab :value="n" v-for="n in 20">Tab {{n}}</v-tab>
    </v-tabs>
    
    <v-card class="my-3" height="200" color="green-lighten-4">
      <v-card-title class="text-h2">{{tab}}</v-card-title>
    </v-card>
    
  </v-container>
</template>
<script>
export default {
  data: () => ({
    tab: 0
  }),
}
</script>

show-arrows prop を使うと、タブを左右に移動させることができる矢印のアイコンが付きます。タブの数が非常に多い場合に有効です。

image

<template>
  <v-container class="pa-4 w-50">
    
    <v-tabs
      v-model="tab"
      bg-color="primary"
      color="yellow"
      center-active
      show-arrows
    >
      <v-tab :value="n" v-for="n in 20">Tab {{n}}</v-tab>
    </v-tabs>
    
    <v-card class="my-3" height="200" color="green-lighten-4">
      <v-card-title class="text-h2">{{tab}}</v-card-title>
    </v-card>
    
  </v-container>
</template>
<script>
export default {
  data: () => ({
    tab: 0
  }),
}
</script>

その他

詳細は公式ページを見てください。