Vuetify.js 2.2のApplicationについて

概要

Vuetify.jsでは以下のコンポーネントを組み合わせてヘッダー、フッター、ナビゲーションメニューを持つアプリケーションの基本構造を構築することができます。

• [Application] (https://vuetifyjs.com/en/components/application) (v-app, v-content)
• [App Bars] (https://vuetifyjs.com/en/components/app-bars) (v-app-bar, v-app-bar-nav-icon)
• [System bars] (https://vuetifyjs.com/en/components/system-bars) (v-system-bar)
• [Navigation drawers] (https://vuetifyjs.com/en/components/navigation-drawers) (v-navigation-drawer)
• [Bottom navigation] (https://vuetifyjs.com/en/components/bottom-navigation) (v-bottom-navigation)
• [Footers] (https://vuetifyjs.com/en/components/footer) (v-footer)

これらのうち、App Bars（[アプリケーションバー] (https://qiita.com/rubytomato@github/items/f901165e32a24fcb44d8)）、Navigation drawers（[ナビゲーションドロワー] (https://qiita.com/rubytomato@github/items/1c75c2b98b8bae410ee1)）、Bottom navigation（[ボトムナビゲーション] (https://qiita.com/rubytomato@github/items/08f7d5387e6e5ff38677)）、Footers（[フッター] (https://qiita.com/rubytomato@github/items/b561453df3ea48c5a95a)）については、別途簡単な使い方を記事にしていますので、この記事ではこれらを組み合わせたときのtipsをまとめました。

環境

• 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)
• [A Complete Guide to Flexbox] (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

[Application] (https://vuetifyjs.com/en/components/application)

Props

VApp

• [VApp] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/components/VApp/VApp.ts)
• Themeable

VApp ---- Themeable

	name	type	default	relation	src
VApp	dark	boolean			undefined
	id	string	'app'		'app'
	light	boolean			undefined
Themeable	dark	boolean			null
	light	boolean			null

VContent

• [VContent] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/components/VContent/VContent.ts)
• [SSRBootable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/mixins/ssr-bootable/index.ts)

VContent ---- SSRBootable

	name	type	default	relation	src
VContent	tag	string	'main'		'main'

デフォルトの構成

v-app

v-app can exist anywhere inside the body of your app, however, there should only be one and it must be the parent of ALL Vuetify components.
-----------------------------------------------------------------------------------------------------
v-appはアプリの本体内のどこにでも存在できますが、存在するのは1つだけで、すべてのVuetifyコンポーネントの親でなければなりません。

アプリケーションの構成要素としてv-navigation-drawer、v-app-bar、v-footerコンポーネントを使用する場合は、v-app直下に配置し、appプロパティを指定します。

v-content

When using vue-router it is recommended that you place your views inside v-content.
---------------------------------------------------------------------------------
vue-routerを使用する場合、ビューをv-content内に配置することをお勧めします。

構造

App.vue

<template>
  <v-app>
    <v-app-bar app>
      <!-- アプリケーションバー -->
    </v-app-bar>

    <v-navigation-drawer app>
      <!-- ドロワー -->
    </v-navigation-drawer>

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

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

• v-system-barとv-app-barを併用した場合、v-system-barはv-app-barの上に配置されます。
• v-navigation-drawerは左右のどちらかに配置できます。
• v-footerとv-bottom-navigationを併用した場合、v-footerはv-bottom-navigationの上に配置されます。

組み合わせtips

アプリケーションバー、ドロワー、フッターを区別しやすように、それぞれ背景色を変えています。

デフォルトのドロワーの開閉

ドロワーにはmobile-break-pointというプロパティがあり、1264というデフォルト値が設定されています。
画面の表示幅がこの値より小さい場合、ドロワーはモバイルデバイス用の代替スタイルが適用されます。

デスクトップ

ドロワーを開くとアプリケーションバーの横、フッターの上に表示されます。
アプリケーションバーはドロワーの幅分、表示幅が縮みます。

モバイルデバイス

ドロワーを開くとアプリケーションバー、フッターの上に被さるように表示されます。
ドロワー外は半透明の色で覆われます。

ドロワーの開閉にフッターを連動させる

上記のデフォルトの動作ではフッターはドロワーの開閉に連動しませんが、下記の設定を行うことで連動させることができます。

デスクトップ

v-footerのinsetプロパティを指定するとアプリケーションバーと同じ動きになります。
つまり、フッターの横に配置されドロワーを開くとドロワーの幅分、表示幅が縮みます。

モバイルデバイス

設定をしてもデフォルトの動作になります。

アプリケーションバーの下にドロワーを配置する

デスクトップ

v-app-barのclippedLeftプロパティを指定（ドロワーを右側に配置する場合はclippedRightプロパティ）し、且つv-navigation-drawerのclippedプロパティを指定します。
すると、ドロワーはアプリケーションバーの下、フッターの上に配置されるようになります。

上記の設定ではアプリケーションバーが浮き上がって見えますが、v-app-barのflatプロパティを設定することでフラットになります。

モバイルデバイス

設定をしてもデフォルトの動作になります。

フッターを画面下に固定する場合

v-footerのabsoluteプロパティを指定するとフッターを画面下部に固定することができます。
しかしドロワーを表示するとフッターの分だけ隙間が空いてしまいます。

この隙間を埋めるには併せてinsetプロパティを指定します。そうするとドロワーが縦方向いっぱいに表示されます。

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

デスクトップ

v-navigation-drawerのpermanentプロパティとexpandOnHoverプロパティを指定すると、ドロワーがミニサイズで常時表示されるようになり、ドロワーをホバーするとドロワーが展開します。

モバイルデバイス

v-navigation-drawerのpermanentプロパティとexpandOnHoverプロパティを指定すると、デスクトップと同じような挙動になります。
しかし、スマホなど表示幅が狭いデバイスで見た場合、ドロワーを開いた分アプリケーションの表示領域が縮み見栄えが悪くなるのでやめた方がいいと思います。（ホバーで展開しない、ドロワーの横幅を狭める等の対応もできますが）
横幅を600pxにしたときの動作です。

ドロワーを下部に表示する

モバイルデバイス

モバイルデバイスの場合に限り、v-navigation-drawerのbottomプロパティを指定すると、ドロワーは画面下部に表示されます。

ボトムナビゲーションを利用する

なお、モバイルデバイス用のナビゲーションメニューに、ボトムナビゲーションを利用するという方法もあります。

Pre-mode layouts

• 参考 : [Pre-made layouts] (https://vuetifyjs.com/en/getting-started/pre-made-layouts/)

Baseline

<v-app>
  <v-navigation-drawer app>
  </v-navigation-drawer>

  <v-app-bar app>
    <v-app-bar-nav-icon />
  </v-app-bar>

  <v-content>
  </v-content>

  <v-footer app>
  </v-footer>
</v-app>

Complex

<v-app>
  <v-navigation-drawer app clipped right>
  </v-navigation-drawer>

  <v-app-bar app clipped-right>
    <v-app-bar-nav-icon />
  </v-app-bar>

  <v-navigation-drawer app>
  </v-navigation-drawer>

  <v-navigation-drawer fixed temporary />

  <v-content>
  </v-content>

  <v-navigation-drawer fixed right temporary />

  <v-footer app>
  </v-footer>
</v-app>