【Vue】Vuetify ～ ユーザへの通知 ～

■ はじめに

https://dk521123.hatenablog.com/entry/2020/12/26/000242
https://dk521123.hatenablog.com/entry/2021/02/14/180324
https://dk521123.hatenablog.com/entry/2021/02/21/162236
https://dk521123.hatenablog.com/entry/2021/02/20/000000

の続き。

今回は、ダイアログなどユーザへの通知をする際のコンポーネントをメモする。

目次

【１】v-alert
【２】v-dialog
【３】v-snackbar

【１】v-alert

https://vuetifyjs.com/ja/components/alerts/

より抜粋
~~~~~~~~~~~~~~~~~~~~~
v-alert コンポーネントは、
コンテキストタイプのアイコンと色を使用して
重要な情報をユーザーに伝えるために使用されます。
~~~~~~~~~~~~~~~~~~~~~

サンプル

<template>
  <div class="home">
    <v-alert
      v-model="isVisible"
      close-text="Close Alert"
      dismissible
      dense
      outlined
      type="success"
      text
      transition="scale-transition"
    >
      {{ $t('Demo.message') }}
    </v-alert>
    <div class="text-center">
      <v-btn
        v-if="!isVisible"
        color="deep-purple accent-4"
        dark
        @click="isVisible = true"
      >
        Reset
      </v-btn>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class Demo extends Vue {
  isVisible = true;
}
</script>

【２】v-dialog

より抜粋
~~~~~~~~~~~~~~~~~~~~~
v-dialog コンポーネントは
特定のタスクについてユーザーに知らせ、
重要な情報を含む、決定を必要とする、
または複数のタスクを含むかもしれません。 
~~~~~~~~~~~~~~~~~~~~~

用途

ダイアログ全般
 => 確認ダイアログ、エラーダイアログなどなど

サンプル

<template>
  <div class="home">
    <v-row justify="space-around">
      <v-col cols="auto">
        <v-dialog
          transition="dialog-bottom-transition"
          max-width="600"
        >
          <template v-slot:activator="{ on, attrs }">
            <v-btn
              color="primary"
              v-bind="attrs"
              v-on="on"
            >Click me!</v-btn>
          </template>
          <template v-slot:default="dialog">
            <v-card>
              <v-toolbar
                color="primary"
                dark
              >Titile</v-toolbar>
              <v-card-text>
                <div class="text-h2 pa-12">Body : Hello world!</div>
              </v-card-text>
              <v-card-actions class="justify-end">
                <v-btn
                  text
                  @click="dialog.value = false"
                >Close</v-btn>
              </v-card-actions>
            </v-card>
          </template>
        </v-dialog>
      </v-col>
    </v-row>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class Demo extends Vue {
}
</script>

【３】v-snackbar

https://vuetifyjs.com/ja/components/snackbars/

より抜粋
~~~~~~~~~~~~~~~~~~~~~
　v-snackbar コンポーネントは、
ユーザーへのクイックメッセージを表示するために使用されます。
~~~~~~~~~~~~~~~~~~~~~

サンプル

<template>
  <div class="home">
    <v-btn
      dark
      color="orange darken-2"
      @click="isVisible = true"
    >
      Click me!
    </v-btn>

    <v-snackbar
      v-model="isVisible"
      :timeout="2500"
    >
      Hello world!!

      <template v-slot:action="{ attrs }">
        <v-btn
          color="blue"
          text
          v-bind="attrs"
          @click="isVisible = false"
        >
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class Demo extends Vue {
  isVisible = false;
}
</script>

関連記事

Vue.js ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/04/30/000000
Vuetify ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/12/26/000242
Vuetify ～ コンポーネント編 ～
https://dk521123.hatenablog.com/entry/2021/02/14/180324
Vuetify ～ 基本編 ～
https://dk521123.hatenablog.com/entry/2021/02/21/162236
Vuetify に関するトラブルシューティング
https://dk521123.hatenablog.com/entry/2021/02/08/000000