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

Vue.js&Vuetifyの記事_v-tabsについて

Vuetify でタブ型のUIを表示してみる

VuetifyのUIコンポーネントを実際に試してみるシリーズの記事、8回目になります。
今回は、タブ型のUIを簡単に実装できる
v-tabs について、書いていきたいと思います。

↑Vuetify を使うと、こんな感じのTab型UIをつくることができます。このサンプルは、当サイトの Vuetifyのサンプル_タブ型UIの表示 で実際にクリックして動かせるサンプルを確認できます。


タブ型のUIというものについては、

・限られた領域に複数の情報を表示する事ができる点
・その領域をユーザーが能動的に操作することによって、表示させたい情報を自ら選択してもらえる点

↑この辺りのメリットを感じており、
うまく取り入れることによって、
ユーザーにより良いWebサイト体験をしてもらえる一助になりうる、優れたUIパーツのひとつだと感じています。

Vuetifyの導入方法について等は、以前の記事:
[Vue.js]Vuetify のUIコンポーネントを使ってみる[v-slide, v-caroucel編]CDN経由での導入方法を、
[Vue.js] Vuetify を導入して Material Design をスマートに取り入れる方法 内に、CLI経由での導入方法 をご紹介しています。あわせてご覧ください。

コードをご紹介

<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の表示ができます。

実際に動くサンプル

今回も実際に動くサンプルを作成してあります。
次のリンクより、ご覧ください。
Vuetifyのサンプル_タブ型UIの表示

公式ドキュメント、APIページについて

v-tabs コンポーネントの Vuetify公式ページは以下になります。
上でご紹介した基本的なタブ型UIの実装サンプルに加えて、
縦型のメニューとコンテンツを組み合わせたサンプルを始め、さまざまな例が記載されていますので、
一読をおすすめします。
タブ・コンポーネント — Vuetify

また、公式APIページはこちらになります。ここに、詳細な設定できる各種 props の一覧が記載されています。
v-tabs API — Vuetify

この記事のまとめ

今回は、Vuetify のUIコンポーネントの中から、
タブ型のUIを実装することができる v-tabs についてご紹介しました。

冒頭にも書きましたが、
タブ型のUIというのは、リスト形式のアコーディオン表示などと同様に、
限られた領域に
複数の情報を効率的に表示させる事ができる、
優れたUIパーツだと感じています。

ときどき書いている事ですが、Webデザインを行う際に
デザイナー的なアプローチ(配色や文字組、レイアウト上の比率や数値のメソッド)に加えて、
Webサイトを構成する要素を
「UIパーツ」として認識してデザインを行なっていく
事で、
さらに良いデザインが行えるのではないかと、個人的には感じています。

そのUIパーツが画面上で担っている役割は、どういったものなのか?という
ところまでデザイナーが認識している事は、

それはつまり、
「そのUIパーツを操作する事で
ユーザーが到達できる
UXを理解してデザインしている」

ということにも繋がってくると思いますので、

ぜひその辺りを意識してデザインと向き合ってみてはいかがでしょうか。

当サイトでは今後も Vue.js、 Vuetify に関する記事を掲載していく予定です。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。