Vue.jsでタブ切り替え機能をシンプルに実装してみる
最終更新日: Update!!
以前にjQueryを使ってタブ切り替え機能を実装してみた記事(jQueryでベーシックなタブパネルメニューを実装する)を公開しましたが、最近ではVue.jsもよく使われており、今回はVue.jsでタブ切り替え機能を作成してみたいと思います。Vue.jsで作成することで、よりシンプルにわかりやすく、少ないメソッドで実装することができますのでコードの見通しも良くなり保守性にも優れます。
早速コードを見ていきます。まずはJavaScriptからですが、CDNやライブラリを読み込む場合は下記のようにVueインスタンスを作成し、その中にオプションを書いていきます。もしくはVueCLIやNuxt.jsなどで単一コンポーネントを使う場合には.vueファイルの中のscriptタグの中に書いていきます。まずは対象となるエレメントを定義します。そしてdataオプションにタブのラベルとコンテンツを配列の値で持たせておきます。さらに現在表示されているタブのインデックスを表す数値も用意しておきます。デフォルトでは最初のタブが表示されている形です。
【JavaScript(Vue)】
タブ切り替え機能はウェブサイトのUIでもよく見かけますが、いろんな実装方法があるかと思います。jQueryなどを使って実装するケースもありますが、Vue.jsを使うことでよりシンプルにわかりやすく、さらに保守性も優れたように作成することができるのでオススメです。ぜひ一度試してみてください。
const vueModel = new Vue({ el: '#app', data: { labels: [ 'Tab1', 'Tab2', 'Tab3', 'Tab4' ], panels: [ 'Tab1のコンテンツが入ります', 'Tab2のコンテンツが入ります', 'Tab3のコンテンツが入ります', 'Tab4のコンテンツが入ります' ], current: 0 }, methods: { tabSelect(index) { this.current = index; } } });最後にmethodsのオプションでタブをクリックした時の処理を記述します。引数を取っておりクリックしたタブ要素のインデックスを受け取るようにしています。こうすることでどのタブがクリックしたかがわかるようになっています。受け取ったインデックスをdataオプションに定義している現在のタブを表す変数に格納することで表示されているタブの情報を更新します。 続いてHTMLです。最近はPugを使うことが多いのでPugで書いていますが、基本的にHTMLも同じようになります。それぞれタブのラベル部分とコンテンツ部分を用意し、dataオプションで定義した配列データをv-forで展開してきます。HTMLの中にはその値が出力されるようにしておきます。そしてdataオプションで保持しているインデックスの情報と、タブ要素のインデックスが同じ場合に表示されていることを示すclass名がつくようにしておきます。最後にラベル部分にはmethodsで定義した選択されたタブを更新する処理をクリックイベントで呼び出すようにします。 【Pug】※一部抜粋
div#app ul.tab-label li(v-for="(label, index) in labels" :key="index" :class="current === index ? 'current' : ''" @click="tabSelect(index)"). {{ label }} ul.tab-panel li(v-for="(panel, index) in panels" :key="index" :class="current === index ? 'current' : ''"). {{ panel }}今回はタブのコンテンツにテキストデータのみを入れる想定ですので配列データの値を出力していますが、もしHTMLや特定のコンポーネントを使う場合には下記のようにv-ifなどでタブのインデックスに合わせて出力するHTMLやコンポーネント切り替えられるようにしておくといいかと思います。
li(v-for="(panel, index) in panels" :key="index" :class="current === index ? 'current' : ''"). div(v-if="current === 0"). Tab1のコンテンツが入ります div(v-else-if="current === 1"). Tab2のコンテンツが入ります div(v-else-if="current === 2"). Tab3のコンテンツが入ります ..........最後にCSSでタブの切り替えができるように表示を調整していきます。選択中のタブとそうでないものをしっかりとわかるようにしておきます。 【Sass(SASS)】※一部抜粋
.tab-label display: flex flex-wrap: nowrap li padding: 16px background: #ddd &.current background: coral color: white .tab-panel li width: 100% padding: 16px border: 4px solid coral &:not(.current) display: noneこれでVue.jsでタブ切り替え機能を実装することができました。今回作成したサンプルは下記のようになります。ご参考にどうぞ。
See the Pen tabmenu_on_vue by designsupply (@designsupply) on CodePen.
タブ切り替え機能はウェブサイトのUIでもよく見かけますが、いろんな実装方法があるかと思います。jQueryなどを使って実装するケースもありますが、Vue.jsを使うことでよりシンプルにわかりやすく、さらに保守性も優れたように作成することができるのでオススメです。ぜひ一度試してみてください。
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
categories