More than 5 years have passed since last update.

Vuetify.js 2.2のBottom navigationコンポーネントについて

Vuetify

Posted at 2020-03-10

概要

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

環境

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/)

[Bottom navigation] (https://vuetifyjs.com/en/components/bottom-navigation)

The v-bottom-navigation is an alternative to the sidebar. It is primarily used on mobile and comes in two variants, icons and text, and shift.
-------------------------------------------------------------------------------------------
v-bottom-navigationは、サイドバーの代替手段です。主にモバイルで使用され、アイコンとテキスト、シフトの2つのバリエーションがあります。

上記に引用したとおり[ボトムナビゲーション] (https://vuetifyjs.com/en/components/bottom-navigation/)は、モバイルデバイスで使用することを想定した[ナビゲーションドロワー] (https://vuetifyjs.com/en/components/navigation-drawers/)の代替手段です。

Props

VBottomNavigation

[VBottomNavigation] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.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)
[ButtonGroup] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/mixins/button-group/index.ts)
[Colorable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/mixins/colorable/index.ts)
[Measurable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/mixins/measurable/index.ts)
[Proxyable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/mixins/proxyable/index.ts)
[Scrollable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/mixins/scrollable/index.ts)
[Themeable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/mixins/themeable/index.ts)
[Toggleable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.15/packages/vuetify/src/mixins/toggleable/index.ts)

VBottomNavigation ---- Applicationable ---- Positionable
                  `--- Colorable
                  `--- Measurable
                  `--- Proxyable
                  `--- Scrollable
                  `--- Themeable
                  `--- Toggleable

	name	type	default	relation	src
VBottomNavigation	active-class	string	'v-btn--active'	v-btn	'v-btn--active'
	background-color	string	undefined
	grow	boolean	false	v-btn
	height	number or string	56		56
	hide-on-scroll	boolean	false
	horizontal	boolean	false	v-btn
	input-value	boolean	true		true
	mandatory	boolean	false
	shift	boolean	false	v-btn
Applicationable	app	boolean	false	v-app
Positionable	absolute	boolean	false
	fixed	boolean	false
Colorable	color	string	undefined
Measurable	height	number or string	-
	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
Proxyable	value	any	undefined
Scrollable	scroll-target	string	undefined	window
	scroll-threshold	string or number	undefined	hide-on-scroll
Themeable	dark	boolean	false		null
	light	boolean	false		null
Toggleable	input-value	boolean	-

input-value : コンポーネントを表示するか非表示にするかを制御します。 .sync修飾子をサポートします。
value : 現在アクティブなv-btnの値を保持します。ボタンに値が指定されていない場合、代わりにそのインデックスが使用されます。

実装例

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

<template>
  <v-app>
    <v-navigation-drawer app v-model="drawer">
      <!-- ドロワー -->
    </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-bottom-navigation app>
      <!-- ボトムナビゲーション -->
      <v-btn v-for="menu in menus" :key="menu.title" :to="menu.url">
        <span>{{ menu.title }}</span>
        <v-icon>{{ menu.icon }}</v-icon>
      </v-btn>
    </v-bottom-navigation>

  </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>

テーマ

dark

darkプロパティでダークテーマを適用したボトムナビゲーションです

light

lightプロパティでライトテーマを適用したボトムナビゲーションです

カラー

colorはナビゲーションアイテム（ボタンやテキスト）の色、background-colorはボトムナビゲーションの背景色を指定します。
図はbackground-colorプロパティにlight-blueを指定したものです。

アクティブカラー

選択中（アクティブな）のナビゲーションアイテムに適用するCSSクラス名をactive-classプロパティで指定できます。デフォルトはv-btn--activeという名前のCSSクラスです。
図はactive-classプロパティにpinkを指定したものです。

表示の切り替え

input-valueプロパティでボトムナビゲーションの表示切替を行います。このプロパティにバインドしたデータがtrueのときは表示され、falseのときは非表示になります。（hide-on-scrollプロパティを指定すると、このinput-valueプロパティの値に関わらずスクロール時に表示／非表示が行われます。）
また、画面下部に固定されます。

スクロール時に表示/非表示

hide-on-scrollプロパティを指定すると、非表示のときに下にスクロールすると表示され、表示されているときに上にスクロールすると非表示になります。
ボトムナビゲーションをhide-on-scrollプロパティだけで制御したい場合はinput-valueプロパティの値をfalseにしておくと良いかもしれません。