[Vue.js]Vuetifyでボトムナビゲーションを実装する方法[v-bottom-navigation]

Vuetifyで綺麗なボトムナビゲーションを実装する方法

VuetifyのUIコンポーネントを実際に試してみるシリーズの記事の、12回目になります。
今回は、主に画面下部で用いる、ナビゲーションメニューを手軽に実装することができる
v-bottom-navigation についての記事です。

↑こんな感じのボトムナビゲーションを表示してみます。上記ムービーのように、クリック操作で表示/非表示の切り替えも可能です。

Vuetifyの導入方法について等は、以前の記事：
[Vue.js]Vuetify のUIコンポーネントを使ってみる[v-slide, v-caroucel編] にCDN経由での導入方法を、
[Vue.js] Vuetify を導入して Material Design をスマートに取り入れる方法内に、CLI経由での導入方法 をご紹介しています。あわせてご覧ください。

コードをご紹介

<template>
  <v-card style="width: 375px; height: 667px;">
    <v-bottom-navigation color="primary" v-model="isActive" absolute="true">
      <v-btn value="menu01">
        <span>menu01</span>
        <v-icon>mdi-history</v-icon>
      </v-btn>

      <v-btn value="menu02">
        <span>menu02</span>
        <v-icon>mdi-heart</v-icon>
      </v-btn>

      <v-btn value="menu03">
        <span>menu03</span>
        <v-icon>mdi-map-marker</v-icon>
      </v-btn>
    </v-bottom-navigation>
  </v-card>
</template>

解説など

この v-bottom-navigation というコンポーネントは、アプリでよく目にする
画面下部のナビゲーションを簡単に実装できるコンポーネントになります。

上記の例の様に、なんらかの親要素でラップして、
3行目にある様に absolute オプション(正確には、props という概念)を true にして表示させるか、
または
fixed という props を加えてページ全体に常時固定表示させるか、
2通りの表示方法が考えられます。
※上記コードの例は、absolute という props をtrueにする方法です。
なお、あえて absolute=”true” と真偽値であることを明示して書いていますが、
単純に absolute と書くだけでも、
このオプションをオンに(trueに)することが可能です。

また、便宜上 v-card でラップしているのは、
v-card はデフォルトで position: relative; をもっているため、
ラップした親要素の範囲内でメニューが配置されることを意図している、ということです。
（ということは、親要素はべつに
普通の div 要素でも良く、position: relative; を加えておけば
問題なく表示が可能、とも言えます。）

2行目の v-card に
style直書きで
width: 375px; height: 667px;
としているのは、
これもサンプルを作るための便宜上の定義です。

実際に使用する場合は、
fixed という props を加えて常時固定表示させるほうが
使い勝手が良いかもしれません。

3行目の
v-bottom-navigation
がこのコンポーネント自体を表示している要素になります。
v-model="isActive" として data が紐づく様になっていますが、
ここに紐づけた data で
どのボタンがアクティブになっているかを管理しています。

data はもちろん、以下の様にあらかじめ Vue に定義しておく必要があります。

<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: {
        isActive: 'menu01'
      }
    });
</script>

↑つまりこういう事でして、
この isActive(名前はなんでも良いです) という data に
現在アクティブになっているボタンの名前が string として格納されていることになります。

このセクション冒頭の、htmlの方のコードの
4, 9, 14行目にある様に、
v-btn
要素が、ボトムナビゲーション内に配置される各ボタンになります。

これらボタンには
value="menu01"
のように value という props が指定されていますが、
ボタンがクリックされるたび、
先ほどの isActive に
valueの値が代入される、そんな仕組みになっています。

この仕組みを元に、例えば3行目で
color=”primary”
と指定しているように、現在アクティブになっているボタンの色を変えたり、
様々な操作を行うことができる様になっています。

実際に動くサンプル

今回も実際に動くサンプルを作成してあります。
次のリンクより、ご覧ください。
v-bottom-navigationのサンプル

toggle（表示/非表示）オプションを試してみる

この v-bottom-navigation にも、Vuetifyの他のコンポーネントの様に
様々な各種 props が用意されていますが、
今回は
「ボタンを押すと、ボトムナビゲーションを表示/非表示させる事ができる」
というオプションをご紹介します。
※いわゆる、トグル(toggle)表示ができる、ということですね。

コードは次の様になります。

<template>
  <v-card style="width: 375px; height: 667px; overflow: hidden;">
    <div class="text-center mb-8">
      <v-btn
        color="primary"
        @click="toggle = !toggle"
      >
        ボトムナビゲーションのON/OFF
      </v-btn>
    </div>

    <v-bottom-navigation color="primary" v-model="isActive" v-bind:input-value="toggle" absolute="true">
      <v-btn value="menu01">
        <span>menu01</span>
        <v-icon>mdi-history</v-icon>
      </v-btn>

      <v-btn value="menu02">
        <span>menu02</span>
        <v-icon>mdi-heart</v-icon>
      </v-btn>

      <v-btn value="menu03">
        <span>menu03</span>
        <v-icon>mdi-map-marker</v-icon>
      </v-btn>
    </v-bottom-navigation>
  </v-card>
</template>

↑先ほどとの違いは、
v-bottom-navigation に
v-bind:input-value=”toggle” として
input-value という props を指定していることです。
ここに紐づけた data が true/false になることで、
ボトムナビゲーションの表示/非表示を制御している、という仕組みになっています。

こちらのサンプルの場合のdataは、以下の様になります。
toggle という真偽値が入る data（名前はなんでも良いです）を加えてあげるだけです。

<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: {
        isActive: 'menu01',
        toggle: true
      }
    });
</script>