Vuetifyで、サイドからスライドインして現れる、ドロワーメニューを使ってみます
今回は、いわゆる「ドロワー」だとか「ハンバーガーメニュー」と呼ばれているUIパーツの、Vuetify版についての記事です。
まずは以下の動画を見ていただくと、どんなものが扱えるかわかりやすいかと思います。
↑Vuetify の v-navigation-drawer を使って、このようなドロワーメニューを表示してみます。
Vuetifyの導入方法について等は、以前の記事:
[Vue.js]Vuetify のUIコンポーネントを使ってみる[v-slide, v-caroucel編] にCDN経由での導入方法を、
[Vue.js] Vuetify を導入して Material Design をスマートに取り入れる方法 内に、CLI経由での導入方法 をご紹介しています。あわせてご覧ください。
v-navigation-drawer を呼び出すコード
v-navigation-drawer
コンポーネントを呼び出すサンプルコードは、以下のようになります。
コード内のコメントにも書いてありますが、v-navigation-drawer
を呼び出している部分自体は29行目〜60行目までです。
<template> <v-card class="mx-auto overflow-hidden" height="667" width="375" > <!-- ここはアプリ風UIのヘッダ部分 --> <v-system-bar color="indigo darken-3"></v-system-bar> <v-app-bar color="indigo accent-4" dark prominent > <v-app-bar-nav-icon @click.stop="mydrawer = !mydrawer"></v-app-bar-nav-icon> <v-toolbar-title>Own WebPage</v-toolbar-title> <v-spacer></v-spacer> <v-btn icon> <v-icon>mdi-magnify</v-icon> </v-btn> <v-btn icon> <v-icon>mdi-dots-vertical</v-icon> </v-btn> </v-app-bar> <!-- // ここはアプリ風UIのヘッダ部分 --> <!-- ここがdrawerコンポーネントを呼び出している部分 --> <v-navigation-drawer v-model="mydrawer" absolute bottom temporary > <v-list nav dense > <v-list-item-group v-model="mygroup" active-class="cyan--text text--accent-4" > <v-list-item> <v-list-item-title>Vue.js</v-list-item-title> </v-list-item> <v-list-item> <v-list-item-title>Vuetify</v-list-item-title> </v-list-item> <v-list-item> <v-list-item-title>WordPress</v-list-item-title> </v-list-item> <v-list-item> <v-list-item-title>Structured</v-list-item-title> </v-list-item> </v-list-item-group> </v-list> </v-navigation-drawer> <!-- // ここがdrawerコンポーネントを呼び出している部分 --> <v-card-text> Vuetify also provides a drawer menu component by default like this, so it's easy to run. <span style="display: block; font-size: .6rem;">(Vuetifyでは、このようにドロワーメニューのコンポーネントもデフォルトで用意されていて、簡単に扱うことができます。)</span> </v-card-text> </v-card> </template>
↑Vuetify に定義されている v-navigation-drawer
コンポーネントを呼び出す基本形は、上記の様な形になります。
上記のサンプルコードでは、便宜上アプリ風のヘッダUIを冒頭(9〜25行目)で作成していて、
その中に置いてあるハンバーガーメニュー的なアイコンをトリガーとして使用しています(15行目)。
Vuetifyのコンポーネントを使う際によくある例ですが、
単純に真偽値(true/false)をもつ data (ここでは mydrawer という名前にしました)を v-model で紐づけてあり、それが true になればドロワーが開き、 falseになれば閉じる、という仕組みです。
また、ドロワーメニュー本体に対しては、40行目のように v-model="mygroup"
として、
こちらも data が紐づけられていますが、このdataには、
選択された項目の番号が数字として返ってきます。(0番目始まりで返ってきます。)
この性質をうまく使えば、選択された項目に応じて何かをする(一番単純なのはページ遷移でしょうか)、
といったプログラム側での制御が可能かと思います。
最低限、用意しておくdataは、以下のようになります。
<script> new Vue({ el: '#app', vuetify: new Vuetify(), data: { mydrawer: false, mygroup: null, // ← 初期値はnullではなく、文字列でも数値でも良いです }, }); </script>
実際に表示してみた v-navigation-drawer のサンプル
実際に動く v-navigation-drawer のサンプルを用意しました。
次のリンクより、見ることができます。
Vuetify の v-navigation-drawer のサンプル
その他、指定可能なオプションなど( v-navigation-drawer がもつ props
について)
他のUIコンポーネント同様、こちらの v-navigation-drawer にも
利用できる prop が多くあります。
それらの props のご紹介は、この記事の続編の記事を書いた際にて、ご紹介できればと思います。
または、下記の公式解説ページをみると、何ができるのか網羅されていますので、一読すると理解が深まります。
公式ドキュメント、APIページなど
v-navigation-drawerコンポーネントのVuetify公式ページは以下です。
ナビゲーションドロワー・コンポーネント — Vuetify
また、公式APIページはこちらになります。他のコンポーネント同様、設定できる props
の一覧が記載されています。
v-navigation-drawer API — Vuetify
この記事のまとめ
今回は、Vuetify の数あるUIコンポーネントの中から、
v-navigation-drawer についてご紹介しました。
手軽にドロワーメニューが使え、かつ prop の使用によって表示位置の変更なども柔軟に可能なこちらのUIコンポーネント。
Vuetifyを使っている場合は、使い勝手が良いUIパーツのひとつかもしれません。
また、実案件でVuetifyを使用していなくても、お試しで実装してみることで、
ドロワーメニューを形作っているタグの構成要素や、動作の仕組みなどの基本的な事を知れるので、
「ドロワーメニュー」というUIパーツへの理解を深めるのにも役立つことと思います。
当サイトでは今後も Vue.js、 Vuetify に関する記事を掲載していく予定です。
※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。