プログラムのお話

Vuetify.jsを使っていく Bottom navigation編

概要

今回はVuetify.jsのBottom navigationを使っていきます。Bottom navigationは名前の通りに画面の下部にナビゲーションを追加できます。公式サイトの説明だとサイドバーの代わりに使用されます。

基本的なBottom navigation

基本的な Bottom navigation は以下のようになります。分かりやすいように背面は黒にしました。
Bottom navigation以外は要素は存在しないので、画面上部に詰まって表示されています。

<template>
  <v-bottom-nav>
      <h1>ぼとーむなびげーじょん</h1>
  </v-bottom-nav>
</template>

propsのabsoluteを設定してみる

propsでabsoluteを設定します。absoluteを設定すると position: absoluteが適用されるのでナビゲーションが画面下部に移動します。position: absoluteについては詳しく説明すると長くなるので調べていただけると有り難いです。

<template>
  <v-bottom-nav absolute>
      <h1>ぼとーむなびげーじょん</h1>
  </v-bottom-nav>
</template>

propsのfixedを設定してみる

propsでfixedを設定します。fixedを設定すると position: fixedが適用されるのでナビゲーションが画面下部に移動します。自分の環境ではウィンドウズの範囲外に存在することになっています。多分他の要素が必要なんだと思います。

<template>
  <v-bottom-nav fixed>
      <h1>ぼとーむなびげーじょん</h1>
  </v-bottom-nav>
</template>

propsのappを設定してみる

propsでappを設定します。appの公式の説明は以下となります。google翻訳頼りに和訳したので違う可能性があるので、間違っている場合は申し訳ありません。

アプリケーションレイアウトの一部として機能します。コンテンツ(v-content)のサイズ変更を動的に調整するために使用されます。正しくappが機能するために外部にv-contentが存在する必要があります。

多分、上記の説明だけだと意味が分からないと思います。以下のページに詳しい説明が書いてあるので見てみてください。。自分はヘッダーやサイドバーなどのアプリケーションのレイアウトのサイズをいい感じに調整してくれる機能が提供されるイメージです。

https://vuetifyjs.com/en/framework/default-markup

実際にアプリケーションのレイアウトの一例を作ってみました。上がappを適用していないレイアウトで、下がappを適用したレイアウトです。appを適用するといい感じのレイアウトになります。ちなみにappを適用するとposition:fixedが適用されるので、Bottom navigationが画面外に移動するのでabsoluteを使ってます。

<template lang="html">
  <v-app class="black">
    <v-navigation-drawer class="red">サイドバー</v-navigation-drawer>
    <v-toolbar class="blue">ヘッダー</v-toolbar>
    <v-content class="green">
      <v-container fluid>
        メインコンテンツ
      </v-container>
    <v-bottom-nav class="pink">
      ボトムナビゲーション
    </v-bottom-nav>
  </v-content>
  </v-app>
</template>

<template lang="html">
  <v-app class="black">
    <v-navigation-drawer class="red" app>サイドバー</v-navigation-drawer>
    <v-toolbar class="blue" app>ヘッダー</v-toolbar>
    <v-content class="green">
      <v-container fluid>
        メインコンテンツ
      </v-container>
    <v-bottom-nav class="pink" app absolute>
      ボトムナビゲーション
    </v-bottom-nav>
  </v-content>
  </v-app>
</template>

propsのcolorを設定してみる

propsでcolorを設定します。colorを設定すると 背景の色を変えることが出来ます。色はカラーコード(#008080など)やRGBA(255,244,244,0.3)、色の名称(white,blueなど)を指定することが出来ます。Vuetifyには色の早見表があります。

https://vuetifyjs.com/en/framework/colors#colors

<template>
    <v-bottom-nav color="blue">
      <h1>ぼとーむなびげーじょん</h1>
    </v-bottom-nav>
</template>

propsのdarkを設定してみる

propsでdarkを設定します。darkを設定するとBottom navigationに暗い色の背景色が適用されます。

<template>
    <v-bottom-nav dark>
      <h1>ぼとーむなびげーじょん</h1>
    </v-bottom-nav>
</template>

propsのlightを設定してみる

propsでdarkを設定します。darkを設定するとBottom navigationに明るい色の背景色が適用されます。

<template>
    <v-bottom-nav light>
      <h1>ぼとーむなびげーじょん</h1>
    </v-bottom-nav>
</template>

propsののheightを設定してみる

propsでdarkを設定します。darkを設定するとBottom navigationのheightを変更できます。デフォルトでは56です。下ではheight=”200″に設定しました。

<template>
    <v-bottom-nav height="200">
      <h1>ぼとーむなびげーじょん</h1>
    </v-bottom-nav>
</template>

propsのactive.syncを設定してみる

propsでactive.syncを設定します。active.syncを設定すると、現在クリックして有効状態になっているボタンの値を保持します。保持する先は:active.sync=”変数”で設定できます。ボタンの値は左から順番に0,1,2…と採番されるようになっています。下の例では分かりやすいようにアイコンの下に番号を書いています。今は0番のボタンがクリックされているので、アイコンが消えて一番左に0と表示されます。

<template>
    <v-bottom-nav :active.sync="bottomNav">
      {{ bottomNav }}
      <v-btn dark>
        <span>0</span>
        <v-icon>ondemand_video</v-icon>
      </v-btn>

      <v-btn dark>
        <span>1</span>
        <v-icon>music_note</v-icon>
      </v-btn>

      <v-btn dark>
        <span>2</span>
        <v-icon>book</v-icon>
      </v-btn>
    </v-bottom-nav>
</template>

<script>
export default {
  name: "bottomnav",
  data: () => ({
      bottomNav: 1
  })
}
</script>

propsのshiftを設定してみる

propsでshiftを設定します。shiftを設定するとボタンがクリックされていない時にアイコンの下部にあるテキストを非表示にします。

<template>
    <v-bottom-nav :active.sync="bottomNav" shift>
      {{ bottomNav }}
      <v-btn dark>
        <span>0</span>
        <v-icon>ondemand_video</v-icon>
      </v-btn>

      <v-btn dark>
        <span>1</span>
        <v-icon>music_note</v-icon>
      </v-btn>

      <v-btn dark>
        <span>2</span>
        <v-icon>book</v-icon>
      </v-btn>
    </v-bottom-nav>
</template>

<script>
export default {
  name: "bottomnav",
  data: () => ({
      bottomNav: 1
  })
}
</script>

propsでvalueを設定してみる

propsでvalueを設定します。valueはBoolean値を受け取りAlertの表示と非表示を切り替えます。