[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経由での導入方法 をご紹介しています。あわせてご覧ください。

それでは、次のページより Vuetify の v-tabs に関して、コードのご紹介および解説を行なっていきたいと思います。ぜひご覧ください。

この記事:[Vue.js]Vuetifyでタブ切り替え型のコンテンツを実装する方法[v-tabs] を書いた人

tedate.jp を運営しています。都内在住。 Webデザイナー/グラフィックデザイナーになって、通算15年程になります。 皆さまがWeb制作をもっと楽しめるような、良い情報を発信できるように。日々記事を書いています。 Webデザイナーとしての修行時代(受託のWebデザイナー時代)のエピソードを含む、私の「人となり」がある程度わかる記事はこちらにございます。