[Vuetify3]Vue.js3に対応したsnackbar(通知表示)を使う方法[v-snackbar]

2022年11月1日に満を持してリリースされたVuetify 3 (コードネーム：Titan)。
この記事を書いている現在(2022年11月26日)、早くも version 3.0.2 に更新されている様です。

今回は、その Vuetify 3 の優れた数々のコンポーネントの中から、
スナックバー(SnackBar)を使用する事ができる
v-snackbar の使用方法について、記事を書いていきます。

スナックバー(SnackBar)というのは、ざっくり言うと例えば、
ユーザーアクションに対して短いメッセージと共に何らかのレスポンスを返すのに役立つ
通知用のUIパーツです。

↑このような、なんらかのユーザーアクションの結果として表示できる通知表示のことです。

具体的な概念は、次の MaterialDesign 公式ページに詳しく記載されています。
Snackbars – Material Design 3
(もともと Vuetify は 2.x系統の頃より MaterialDesignFramework(マテリアルデザインフレームワーク) と明言していたUIフレームワークなので、マテリアルデザインとの相互理解を深める上でも役立ちます)

このスナックバー(SnackBar) というUIパーツは、
上でも書いた通り、「ボタンを押す」「設定を変更する」などと言った何らかのユーザーアクションの
フィードバックを表示するのにとても適したUIパーツです。

以前ご紹介した v-btn を押した際の結果として表示させるなど、
組み合わせて使い方を覚えておくと色々な場所で活用でき、
「行動の結果、アプリやWebサイト内で何が起きたか」と言うことを伝えやすく、
こちらも個人的にとても好きなUIコンポーネントになります。

それでは次のセクションから、そんな v-snackbar の使用方法について、書いていきたいと思います。
なお、この記事を書いた際に Vue3, Vuetify3 を動作させている環境は次のとおりです。
参考までにご確認ください。
・Mac OS Montrey (12.3.1)
・Node.js v16.18.1
↑この Node.js のバージョンは、 Corepack が同梱されているバージョン( v16.10以降 )を使用することをお勧めします。

v-snackbar の使用方法

では早速、v-snackbar の使用方法です。

<div>
  <v-btn @click="mySnackbar.isShow = true">Snackbarを表示</v-btn>
  <v-snackbar
    :timeout="mySnackbar.timeOut"
    v-model="mySnackbar.isShow"
  >
    {{ mySnackbar.textContent }}
    <template v-slot:actions>
      <v-btn variant="text" @click="mySnackbar.isShow = false">Close</v-btn>
    </template>
  </v-snackbar>
</div>

snackbarは、上記の例の様に v-btn を押した結果に表示させるのが
例としてはわかりやすいかと思います。

上記の例では、
2行目の v-btn が v-snackbar を開くためのボタンになっています。
このボタンをクリックすると
5行目で v-snackbar の v-model として紐づいている data の値が true になり、
snackbarが表示されると言う仕組みです。
同じく4行目で v-snackbar に :timeout として紐づいている(v-bindされている)値は、
文字通りタイムアウトまでの秒数です。
この timeout という prop にミリ秒で値を渡す事で、
何秒間表示させるか、と言うことを指定できます。

8行目で出てくる v-slot ですが、
これはざっくり言うと、使用した場所に
ほかのコンポーネント内であらかじめ定義されている要素を
差し込む事ができる、という Vue.js の機能になります。
ここでは、 template v-slot:actions として v-btn をラップする事で
ボタン要素の見た目を変更しています。
v-slotについての詳しい解説は、Vue.js公式の次のページに記載されています。
スロット | Vue.js

さて、いろいろと v-snackbar に渡す data が出てきましたが、
そのdata側は、たとえば次の様に用意しておけば良いです。

<script>
  import { reactive } from 'vue'
  export default {
    setup() {
      const mySnackbar = reactive({
        textContent: 'スナックバーが開かれました',
        isShow: false,
        timeOut: 2000,
      })
      return {
        mySnackbar
      }
    }
  }
</script>

↑この例ではsetup関数内に const mySnackbar として
ひとつのdata変数としてまとめて書いていますが、
もちろん個々の値に分けて定義しても動作します。

色を変えてみたり、いろいろなカスタマイズができます

色を変えるには、他のコンポーネント同様に
color という prop を使うと、次の様なコードで
snackbarの色を変えることが可能です。

[template側]

(...中略...)
<v-snackbar
  color="indigo"
  :timeout="mySnackbar.timeOut"
  v-model="mySnackbar.isShow"
>
(...中略...)

↑3行目の様に、color=”” として色の値を渡す事ができます。
渡せる色の値は、ほかのコンポーネント同様に
material design に定義されている色名や
cssで指定できる値( color="#1AA1E5" や color="hsla(200, 80%, 50%, 1)" の様に指定 )
等を使用する事ができます。

色変更ができる color という prop 以外にも、設定可能な複数の prop があります。
設定可能な prop 一覧については、
公式サイトの次のページに解説がありますので、一読すると理解が深まると思います。
v-snackbar API — Vuetify