Top > Vue.js関連 > [Vue.js]Vuetifyでタブ切り替え型のコンテンツを実装する方法[v-tabs]

[Vue.js]Vuetifyでタブ切り替え型のコンテンツを実装する方法[v-tabs] :2ページ目

この記事は Vue 2.x 系、 Vuetify 2.x 系 を対象とした記事になります。
2022年3月、Vue 3.x 系統に対応した Vuetify 3 Beta がリリースされました。
Vuetify 3 Beta のインストールを試してみた記事もありますので、ぜひそちらもご覧ください。
対象の記事：Vuetify3 Betaをインストールしてみた件

v-tabs を呼び出すコードをご紹介

<template>
  <v-card>
    <v-card-title class="text-center justify-center py-6">
      <h2 class="display-1 font-weight-bold">
        Tab型UIをVuetifyで使ってみるサンプル 
      </h2>
    </v-card-title>

    <v-tabs grow>
      <v-tab
        v-for="title in titles"
        :key="title.id"
      >
        {{ title.name }}
      </v-tab>

      <v-tab-item>
        <v-card>
          <v-card-text>
            タブ1の内容をここに記述します。もちろんこれは、あらかじめ Vue.js の data で定義しておいて、それを呼び出す形でも良いです。配列で格納しておいて、v-for で順番に取り出したりしても良さそうですね。
          </v-card-text>
        </v-card>
      </v-tab-item>
      <v-tab-item>
        <v-card>
          <v-card-text>
            タブ2の内容をここに記述します。
          </v-card-text>
        </v-card>
      </v-tab-item>
      <v-tab-item>
        <v-card>
          <v-card-text>
            タブ3の内容をここに記述します。
          </v-card-text>
        </v-card>
      </v-tab-item>
      <v-tab-item>
        <v-card>
          <v-card-text>
            タブ4の内容をここに記述します。
          </v-card-text>
        </v-card>
      </v-tab-item>

    </v-tabs>
  </v-card>
</template>

解説など

では、詳しく見ていきましょう。
この v-tabs というコンポーネントは、基本的には上記の例でいうと、
9行目にある

<v-tabs>

から、46行目の

</v-tabs>

の閉じタグでラップされた範囲の要素がタブの領域として表示されることになります。

10行目の <v-tab> から15行目の閉じタグまでが、
領域上部の、
タブ名が表示される部分（ここを押してコンテンツを切り替える）になります。

9行目の v-tabs には、grow というオプション(オプションというより、厳密には props )を加えています。
これを加える事で、親要素のもつ横幅の領域を、
各タブが自動的に埋めてくれるようになります。（設定しないと、タブが左端に寄った形の表示になります。）

また、今回のサンプルでは、あらかじめ Vue.js の data に
titles というデータを配列で定義しておき、それを
v-for をつかって順番に取り出してあげる、
という方法を使用しています。

<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    titles: [
      {id: 01, name: 'WordPress'},
      {id: 02, name: 'Vuetify'},
      {id: 03, name: 'Gatsby.js'},
      {id: 04, name: 'Vue.js'}
    ],
  })
</script>

↑こちらが Vue 内の data 定義の例になります。
このように、titles（名前はなんでも良いです）という配列に各タブ名を定義しておいて、 v-for で順番に取り出しています。

さて、話をタブ本体のコードの解説に戻します。
10行目の <v-tab> から15行目までのタブ名の部分の次は、

17行目から44行目まで <v-tab-item> のペアが
4つ続いていますが、
この部分が各タブ名を押すことによって
切り替え表示されるコンテンツの部分になっています。

今回のサンプルでは、便宜上 v-card の中に v-card-text を入れています。
もちろん、他のタグを適宜入れることも可能です。

このようなシンプルな構造で、簡単にタブ型のUIを表示させる事が可能です。

以上を組み合わせて記述することで、次のサンプルのようにタブ型UIの表示ができます。