[Vue.js]Vuetifyを使って、サイドからスライドインするドロワーメニュー(ハンバーガーメニュー)を作る方法[v-navigation-drawer]

Vuetify関連の記事_v-navigation-drawerについて

Vuetifyで、サイドからスライドインして現れる、ドロワーメニューを使ってみます

VuetifyのUIコンポーネントを実際に試してみるシリーズの記事、22回目になります。

今回は、いわゆる「ドロワー」だとか「ハンバーガーメニュー」と呼ばれている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 に関する記事を掲載していく予定です。

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

この記事をシェアする: