Vuetify.js 2.2のNavigation drawersコンポーネントについて

概要

Navigation drawersコンポーネントの初歩的な使い方のまとめです。

環境

• Windows 10 Professional 1909
• Node.js 12.14.1
• Vue.js 2.6.11
• Vuetify.js 2.2.15

参考

• [Quick start - Vuetify.js] (https://vuetifyjs.com/en/getting-started/quick-start)
• [Components] (https://vuetifyjs.com/en/components/api-explorer)
• [Styles - Colors] (https://vuetifyjs.com/en/styles/colors)
• [Material Design Icons] (https://cdn.materialdesignicons.com/4.5.95/)

[Navigation drawers] (https://vuetifyjs.com/en/components/navigation-drawers)

Props

VNavigationDrawer

• [VNavigationDrawer] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.ts)
• [Applicationable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/mixins/applicationable/index.ts)
• [Positionable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/mixins/positionable/index.ts)
• [Colorable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/mixins/colorable/index.ts)
• [Dependent] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/mixins/dependent/index.ts)
• [Overlayable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/mixins/overlayable/index.ts)
• [SSRBootable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/mixins/ssr-bootable/index.ts)
• [Themeable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/mixins/themeable/index.ts)

VNavigationDrawer ---- Applicationable ---- Positionable
                  |
                  `--- Colorable
                  `--- Dependent
                  `--- Overlayable
                  `--- SSRBootable
                  `--- Themeable

	name	type	default	relation	src
VNavigationDrawer	bottom	boolean	false	mobile-break-point
	clipped	boolean	false
	disable-resize-watcher	boolean	false
	disable-route-watcher	boolean	false
	expand-on-hover	boolean	false	mini-variant
	floating	boolean	false
	height	number or string	100%		this.app ? '100vh' : '100%'
	mini-variant	boolean	false
	mini-variant-width	number or string	56		56
	mobile-break-point	number or string	1264		1264
	permanent	boolean	false
	right	boolean	false
	src	string or object	undefined	v-img	''
	stateless	boolean	false
	tag	string	'aside'		this.app ? 'nav' : 'aside'
	temporary	boolean	false
	touchless	boolean	false
	width	number or string	256		256
	value	any	undefined
Applicationable	app	boolean	false
Positionable	absolute	boolean	false
	fixed	boolean	false
Colorable	color	string	undefined
Overlayable	hide-overlay	boolean	false	temporary
	overlay-color	string	undefined
	overlay-opacity	number or string	undefined
Themeable	dark	boolean	false		null
	light	boolean	false		null

• value : コンポーネントを表示するか非表示にするかを制御します。

実装例

ドロワーはVuetifyアプリケーションの一部（v-appコンポーネントに組み込み、v-navigation-drawerコンポーネントのappプロパティを指定する）として利用するほかに、アプリケーションとは別に単体で利用することもできます。
以下の実装例の動作結果は、Vuetifyアプリケーションの一部として実装したものになります。

<template>
  <v-app>
    <v-navigation-drawer app v-model="drawer">
      <v-list-item>
        <v-list-item-title class="title">
          Application
        </v-list-item-title>
        <v-btn icon>
          <v-icon>mdi-chevron-left</v-icon>
        </v-btn>
      </v-list-item>
      <v-divider />
      <v-list nav>
        <v-list-item v-for="menu in menus" :key="menu.title" :to="menu.url">
          <v-list-item-icon>
            <v-icon>{{ menu.icon }}</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>{{ menu.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-app-bar app>
      <!-- アプリケーションバー -->
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
    </v-app-bar>

    <v-content>
      <router-view />
    </v-content>

    <v-footer app>
      <!-- フッター -->
    </v-footer>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    drawer: false,
    menus: [
      { title: 'Index', icon: 'mdi-web', url: '/' },
      { title: 'Home', icon: 'mdi-home', url: '/home' },
      { title: 'Favorites', icon: 'mdi-heart', url: '/favorites' },
      { title: 'About', icon: 'mdi-information-variant', url: '/about' }
    ]
  })
}
</script>

ドロワーの開閉はv-navigation-drawerコンポーネントのv-modelでバインドしたデータで制御します。

テーマ

dark
darkプロパティでダークテーマを適用したドロワーです。

light
lightプロパティでダークテーマを適用したドロワーです。

カラー

colorプロパティでドロワーの背景色を指定できます。図はblueを指定したものです。

常時表示

permanentプロパティを指定するとドロワーは画面の表示幅に関係なく常時表示されるようになります。

表示幅

widthプロパティでドロワーの横幅を指定することができます。デフォルトは256pxです。
heightプロパティでドロワーの縦幅を指定することができます。デフォルトは100%です。

floating

floatingプロパティを指定するとドロワーの右側のボーダーを除去（ドロワーを右側に表示する場合は左側のボーダー）します。

floatingプロパティの指定なし（デフォルト）

floatingプロパティの指定あり

temporary

temporaryプロパティを指定した場合、ドロワーを開くとアプリケーションの表示領域に被さるように表示され、ドロワー外が半透明の色で覆われます（オーバーレイのエフェクト）。hide-overlayプロパティを指定するとオーバーレイのエフェクトは発生しません。
また、ドロワーが表示された状態でドロワー以外の場所をクリックするとドロワーが閉じます。

temporaryプロパティの指定なし（デフォルト）
ドロワーを開くとアプリケーションの表示領域がドロワーの分だけ縮みます。

temporaryプロパティの指定あり
ドロワーがアプリケーション領域に被さるように表示されドロワー外が半透明の色で覆われます。

オーバーレイ

overlay-colorプロパティでオーバーレイの色、overlay-opacityプロパティでオーバーレイの透過度を指定します。
図はoverlay-colorにindigoを指定したものです。

ドロワーを右側に表示

rightプロパティを指定するとドロワーは右側に表示されます。

ドロワーをミニサイズで表示

mini-variantプロパティを指定するとドロワーはミニサイズで表示されます。このときの表示幅はmini-variant-widthプロパティで指定することができます。デフォルトは56pxです。

ホバーで展開

expand-on-hoverプロパティを指定するとドロワーはミニサイズで表示され（mini-variantプロパティの指定に関わらず）、ホバーするとドロワーが展開されます。

ドロワーの背景に画像を使用する

srcプロパティでドロワーの背景画像を指定できます。
後述するimgスロットを使用することで画像にグラデーションなどのエフェクトをかけることもできます。
図はimgスロットでグラデーションをかけたものです。

モバイルデバイス判定

画面の表示幅がmobile-break-pointプロパティで指定する値（デフォルトは1264）以下になるとモバイルデバイス判定となります。
モバイルデバイスと判定された場合、temporaryプロパティの指定に関わらずtemporaryプロパティを指定した状態になります。

またbottomプロパティを併せて指定するとドロワーは画面下部に表示されます。

なお、画面下部にナビゲーションメニューを表示する[Bottom navigation] (https://vuetifyjs.com/en/components/bottom-navigation/)というコンポーネントがあります。

自動開閉の判定

画面リサイズ時

disable-resize-watcherプロパティで画面リサイズ時のドロワー開閉の挙動を決めることができます。
permanentを指定しない且つドロワーを表示した状態で、モバイルデバイスと判定されるまで画面の表示幅を狭めると、

指定しない場合の挙動

ドロワーが自動的に閉じtemporaryプロパティを指定した状態と同じになります。（オーバーレイがかかる）

指定した場合の挙動

ドロワーは閉じずtemporaryプロパティを指定した状態になります。

画面遷移時

disable-route-watcherプロパティで画面遷移時のドロワー開閉の挙動を決めることができます。
temporaryプロパティを指定し且つドロワーを表示した状態で画面遷移すると、

指定しない場合の挙動

遷移後の画面でドロワーを閉じます。

指定した場合の挙動

遷移後の画面でもドロワーは閉じません。

自動制御を無効にする

statelessプロパティを指定すると、自動的に行われていたドロワーの制御が無効になります。
ドロワーの制御をプログラマティックに行いたい時に指定します。

無効になる挙動として

• モバイルデバイス判定が無効になります。
• templateプロパティを指定したときのドロワー外をクリックしたときのドロワーが閉じる動作が無効になります。

スロット

prepend、appendスロット

ドロワーの先頭、末尾に任意のコンポーネントを追加することができます。

<template v-slot:prepend>
  <div class="pa-2">
    <v-btn block>prepend</v-btn>
  </div>
</template>

<template v-slot:append>
  <div class="pa-2">
    <v-btn block>Logout</v-btn>
  </div>
</template>

imgスロット

imgスロットを使うとv-imgコンポーネントで画像にエフェクトをかけることができます。

<template v-slot:img="{ height, src }">
  <v-img :height="height" :src="src" gradient="to top right, rgba(55,236,186,.7), rgba(25,32,72,.7)"></v-img>
</template>