アイコンにさりげないバッジ通知を。Vuetify の v-badge でバッジ通知を表示できます

まずはコードをご紹介

それでは早速、Vuetify でユーザーアイコンにバッジ通知を表示してみます。
このコンポーネントも、基本の形はとてもシンプルな構造をしています。

<template>
  <v-form>
    <v-container>
      <v-row>
        <v-col
          cols="12"
        >
          <v-badge
           bordered
           bottom
           color="pink lighten-2"
           dot
           offset-x="12"
           offset-y="12"
          >
          <v-avatar size="60">
             <v-img src="https://picsum.photos/id/1025/100/100"></v-img>
          </v-avatar>
        </v-badge>
      </v-col>
    </v-container>
  </v-form>
</template>

↑ とても簡潔な記述ですね。
16~18行目で v-avatar を使って表示させているユーザーアイコンを、
8, 19行目を見ればわかる通り、 v-badge でラップしてあげるだけです。

なお、9~14行目は v-badge に指定しているオプションになります。
11行目に色を指定していますが、
Vuetifyに用意されているマテリアルデザインの豊富なカラーパレットから、
自由にバッジ色を指定することが可能です。（もちろんcssで直指定することもできます）

これを実際に表示してみると、次のようなサンプルになります。

v-badge のサンプル

上記コードを実際に反映してみたサンプルです。
次のリンクよりご確認ください。
Vuetifyのサンプル_バッジ通知

Vue.jsの機能を使い、通知数の data を増減させてみる

上でご紹介した基本のバッジ通知をもとに、
Vue.js が得意としている双方向のデータバインディングにはたらきかけて、
ボタンを押したらバッジ内の通知数が増える例を見てみたいと思います。

Vuejs の data 内に、あらかじめ通知数を管理するための値を定義しておいて、
それを v-badge にオプションとして渡しておきます。
具体的には、次のコードのようになります。

<template>
  <v-container>
                 
    <div style="margin: 2rem 0 0;">
      <v-badge
        :content="notice"
        :value="notice"
        color="green"
        overlap
      >
      <v-avatar size="60">
        <v-img src="https://picsum.photos/id/1025/100/100"></v-img>
      </v-avatar>
      </v-badge>
    </div>

    <div style="margin: 2rem 0 0;">
      <v-btn
        class="mx-1"
        color="primary"
        @click="notice++"
      >
        通知を増やすサンプル
      </v-btn>

      <v-btn
        class="mx-1"
        color="error"
        @click="notice = 0"
      >
        通知数をクリアする
      </v-btn>
    </div>

  </v-container>
</template>

↑ 通知数を管理するためにあらかじめ Vue.js の data 内に定義しておいた
notice という値を、
6,7行目で v-badge に渡しています。
バッジ通知内の数の増減を再現するために、
ユーザーアイコンの下には
2つのボタンを用意しました。
21行目を見ればわかると思いますが、
‘通知を増やすサンプル’ というボタンを押すと、
このボタンには
@click=”notice++” が指定してありますので、
notice の値が1ずつプラスされていく形になります。

また、29行目に書いてあるように、
@click=”notice = 0″ という指定をしているため、
‘通知数をクリアする’ というボタンを押すと、
notice の値が 0 になり、バッジ通知自体も消える仕組みになっています。

これを実際に表示してみると、次のようなサンプルになります。

ボタンを押すとバッジ通知内の数値が増減するサンプル

Vuetifyのサンプル_バッジ通知
先ほどのシンプルなバッジ通知の下に、サンプルを用意してあります。

‘通知を増やすサンプル’と言うボタンを押すと、バッジ通知内の数値が加算され、
‘通知数をクリアする’と言うボタンを押すと、バッジ通知が消えることが確認できると思います。

Vueのdata内への値の定義

上記のバッジ通知内の数値の増減の例で出てきた
notice という data は、次のように定義しておきます。

<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: {
      notice: 3, // 初期値を仮に 3 としてあります
    }
  });
</script>

↑ この data を定義しておくことで、
上でご紹介したような動きを試すことができる、というわけです。

Vuetifyの公式ページ、公式APIページなど

VUetify公式に用意されている、v-badge の解説ページは次になります。
バッジ・コンポーネント — Vuetify

公式APIページのリンク先は次になります。
v-badge API — Vuetify

この記事のまとめ

今回は、Vuejs と Vuetify を組み合わせて
ユーザーアイコンにバッジ通知を表示させることができる v- badge コンポーネントについて、書きました。

こちらのUIコンポーネントですが、
例えばユーザーが何かのメッセージを受け取れるような仕組みのWebアプリがあるとして、
そのメッセージ数を管理するdataをあらかじめ定義しておき、
今回ご紹介した例のように、
未読メッセージが発生したら、
dataを加算させてバッジ通知を表示してあげるような、そんな場面で活躍してくれそうですね。

そしてユーザーがメッセージを既読状態にしたら、
該当する同じdataの値を
減算させてあげれば、一般的なバッジ通知として機能するのではないでしょうか。

これらの仕組みは、
たとえば動的なデータの管理には firebase の firestore と組み合わせて作っておいたりすると、
ユーザーがアクションを起こしたその瞬間に、データの変更を即時反映でき、
また、Vue.jsとの相性もとても良いのでおすすめです。

当サイトでは今後も Vue.js、 Vuetify に関する記事を掲載していく予定です。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。