Vuetify.js 2.2のApp Barsコンポーネントについて

概要

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

環境

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

参考

• Quick start - Vuetify.js
• Components
• Styles - Colors
• Material Design Icons

App Bars

Props

VAppBar

• VAppBar
• VToolbar
• VSheet
• Applicationable
• Positionable
• Scrollable
• SSRBootable
• Toggleable

VAppBar ---- VToolbar ---- VSheet ---- BindsAttrs
        |                         `--- Colorable
        |                         `--- Elevatable
        |                         `--- Measurable
        |                         `--- Themeable
        |
        `--- Applicationable ---- Positionable
        `--- Scrollable
        `--- SSRBootable
        `--- Toggleable

	name	type	default	relation	src
VAppBar	clipped-left	boolean	false	v-navigation-drawer
	clipped-right	boolean	false	v-navigation-drawer
	collapse-on-scroll	boolean	false
	elevate-on-scroll	boolean	false
	fade-img-on-scroll	boolean	false
	hide-on-scroll	boolean	false
	inverted-scroll	boolean	false
	scroll-off-screen	boolean	false
	shrink-on-scroll	boolean	false	prominent,dense,short
	value	boolean	true		true
VToolbar	absolute	boolean	false
	bottom	boolean	false
	collapse	boolean	false
	dense	boolean	false
	extended	boolean	false
	extension-height	number or string	48		48
	flat	boolean	false
	floating	boolean	false
	prominent	boolean	false
	short	boolean	false
	src	string or object	undefined	v-img	''
	tag	string	'header'		'header'
	tile	boolean	true		true
VSheet	tag	string	-		'div'
	tile	boolean	-
Colorable	color	string	undefined
Elevatable	elevation	number or string	undefined
Measurable	height	number or string	undefined
	max-height	number or string	undefined
	max-width	number or string	undefined
	min-height	number or string	undefined
	min-width	number or string	undefined
	width	number or string	undefined
Themeable	dark	boolean	false		null
	light	boolean	false		null
Applicationable	app	boolean	false
Positionable	absolute	boolean	-
	fixed	boolean	false
Scrollable	scroll-target	string	undefined
	scroll-threshold	string or number	undefined
Toggleable	value

実装例

テーマ

dark

darkプロパティでダークテーマを適用したアプリケーションバーです。

<v-app dark>
  <v-app-bar dark>
    <v-app-bar-nav-icon />
    <v-toolbar-title>Title</v-toolbar-title>
    <v-spacer />
    <v-btn icon>
      <v-icon>mdi-home</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>mdi-magnify</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>mdi-account</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>mdi-dots-vertical</v-icon>
    </v-btn>
  </v-app-bar>
  <v-content>
    <router-view />
  </v-content>
</v-app>

light

lightプロパティでライトテーマを適用したアプリケーションバーです。lightプロパティ以外のソースコードはダークテーマと同一です。

カラー

colorプロパティでアプリケーションバーの背景色を指定します。

エレベーション

elevationプロパティに0から24までの数値を指定できます。0は浮き上がり効果がなく、1以上で数値が大きくなるほどアプリケーションバーが浮き上がって見えます。
図はelevationプロパティに10を指定したものです。

flatプロパティを指定するとアプリケーションバーの浮き上がり効果を無くすことができます。（elevationプロパティに0を指定するのと同じ効果です）

アプリケーションバーの高さを変える

下記のプロパティを指定することでアプリケーションバーの高さを変えることができます。デフォルトは56pxです。

prop	height
dense	48px
short (default)	56px
prominent + dense	96px
prominent + short	112px
prominent	128px

denseプロパティ指定時は48px。

shortプロパティ指定時は56px。（デフォルトの高さなので指定しても変わりません）

prominent + denseプロパティ指定時は96px。

prominent + shortプロパティ指定時は112px。

prominentプロパティ指定時は128px。

スクロール時のエフェクト

スクロールで縮める

shrink-on-scrollプロパティを指定するとアプリケーションバーの高さが128pxになりスクロールすると縮みます。
dense、shortプロパティと組み合わせて高さを変えることができます。

prop	height	shrink
shrink-on-scroll	128px	56px
shrink-on-scroll + dense	96px	48px
shrink-on-scroll + short	112px	56px

スクロールで浮き上がらせる

elevate-on-scrollプロパティを指定するとスクロールで浮き上がる効果が発生します。elevationプロパティと併用はできません。

スクロールで非表示にする

hide-on-scrollプロパティを指定すると下へスクロールすると非表示になります。拡張スロットは引き続き表示されます。

※inverted-scroll、scroll-off-screenというプロパティもありますが、どのような動作をするのか確認できませんでした。

スクロール時のエフェクトが発生する閾値を決める

scroll-thresholdプロパティでスクロール時のエフェクトが発生するスクロール距離を設定できます。
以下の2つのgifは、scroll-thresholdプロパティの設定によって、hide-on-scrollとfade-img-on-scrollプロパティの効果が表れるまでの違いを確認したものです。

scroll-thresholdプロパティは未設定

scroll-thresholdプロパティは300を設定

アプリケーションバーの背景に画像を使う

srcプロパティでアプリケーションバーの背景に画像を使用することができます。

<v-app-bar src="https://picsum.photos/1920/1080?random">
  <!-- 省略 -->
</v-app-bar>

さらにimgスロットを併用することで画像にエフェクトを加えることができます。

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

fade-img-on-scrollプロパティを指定するとスクロールで画像をフェードアウトさせることができます。

shrink-on-scrollプロパティと併用することも可能です。

エクステンションの追加

extensionスロットでアプリケーションバーの下部に拡張メニューを追加することができます。

<template v-slot:extension>
  <v-tabs align-with-title fixed-tabs color="white">
    <v-tabs-slider color="yellow"></v-tabs-slider>
    <v-tab><v-icon>mdi-home</v-icon></v-tab>
    <v-tab><v-icon>mdi-magnify</v-icon></v-tab>
    <v-tab><v-icon>mdi-account</v-icon></v-tab>
  </v-tabs>
</template>

図は上記のコードでタブグループを追加したものです。

extensionスロットの高さはデフォルトで48pxですが、extension-heightプロパティで任意の高さに指定できます。図は72pxを指定したものです。

extendedプロパティを指定すると、extensionスロットが無くてもextensionスロット分の高さをアプリケーションバーに加えます。

prop	height
extended + dense	96px	48px
extended + short	104px	56px
extended	112px	64px
extended + prominent + dense	144px	96px
extended + prominent + short	160px	112px
extended + prominent	176px	128px

図はextendedプロパティを指定した状態で112pxの高さです。

extension-heightプロパティも反映されます。図は72pxを指定したものです。

extendedで追加した部分にもhide-on-scrollプロパティは有効です。

アプリケーションバーをたたむ

collapseプロパティでアプリケーションバーをたたむことができます。このプロパティはプログラマティックに操作したいときに使用するようです。

collapse-on-scrollプロパティを指定するとスクロールでアプリケーションバーをたたみます。

ナビアイコン

v-app-bar-nav-iconコンポーネントでナビアイコンを表示することができます。
デフォルトはハンバーガーメニュー(Material Design Iconsではmdi-menu)です。

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

  <!-- 省略 -->
</v-app-bar>

任意のアイコンへ変更する場合はv-iconコンポーネントで指定します。

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