プログラムのお話

Vuetify.jsを使っていく Alert編

概要

VuetifyのUIコンポーネントである、Alertを使っていきます。公式のサイトに殆ど書いていますが、実際に使ってみて感想でも書いていこうと思います。

基本的なAlert

<template>
    <v-alert :value="true" type="success">
      テスト用のアラートです(- -)
    </v-alert>
</template>


重要な情報をユーザーに伝える為に使います。実際に重要な情報を伝える為のAlertを作成してみると以下のようになります。多分これが普通の使い方だと思います。

<template>
    <v-alert :value="true" type="error">
      パスワードは8文字以上で入力してください
    </v-alert>
</template>

propsのcolorを設定してみる

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

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

<template>
    <v-alert :value="true" color="purple">
      propsのcolorを設定しています
    </v-alert>
</template>

propsのdismissibleを設定してみる

propsでdismissibleを設定します。 dismissible を設定するとAlertの右側に閉じるボタンが追加されます。閉じるボタンをクリックするとAlertは閉じます。ちなみに dismissibleを設定する時は通常のpropsを設定する時と同じように :dismissible=”true” で閉じるボタンを追加できます。

<template>
    <v-alert :value="true" dismissible>
      propsのdismissibleを設定しています
    </v-alert>
</template>

もしAlertの現在の状態(開閉)を取得したい場合はv-modelを追加します。自動的にAlertの現在の状態をdataのalertに双方向バインディングします。開いている場合はalertの値はtrueで閉じている場合はfalseとなります。

<template>
    <v-alert :value="true" v-model="alert" dismissible>
      propsのdismissibleを設定しています
    </v-alert>
</template>

<script>
export default {
    name: "alertsample",
    data: () => ({
        alert: true
    })
}
</script>


propsのiconを設定してみる

propsでiconを設定します。 icon を設定するとAlertの左側のアイコンを変更できます。iconはicon=”iconの名称”と指定することで使用できます。使用できるアイコンは以下のサイトをご覧ください。

https://material.io/tools/icons/?style=baseline

<template>
    <v-alert :value="true" icon="3d_rotation">
      propsのiconを設定しています
    </v-alert>
</template>

propsのtransitionを設定してみる

propsでmodeを設定します。 mode を設定すると トランジション を設定することが出来ます。通常はvue.jsでは トランジションを設定するには追加したい対象の要素を<transition>で囲う必要がありました。VuetifyではAlertに追加するだけで済みます。
トランジションの動きは以下のサイトに色々と書いてあります。

https://vuetifyjs.com/en/framework/transitions#slide-x-transitions

実際に以下のようになります。コードをコピペして使ってみたください。
transition =”?”の部分を色々変えてみると面白いです。

<template>
  <div class="alertsample">
    <div class="text-xs-center">
      <v-btn @click="alert = !alert">
        横方向にスーっと
      </v-btn>
    </div>
    <v-alert :value="alert" transition="slide-x-transition">
      propsのtransitionを設定しています
    </v-alert>
  </div>
</template>

<script>
export default {
    name: "alertsample",
    data: () => ({
        alert: true
    })
}
</script>

<style>
.alertsample{
    width: 30%;
    padding: 3%;
}
</style>

propsのoriginを設定してみる

これはトランジションのアニメが始まる場所を設定することが出来るのですが、自分はいくらやっても設定が出来なかったです。現在調査中です。

propsのmodeを設定してみる

これもmodeの設定方法が分からなかったです。変わりにvuetifyのtransitionを使ってAlertを切り替える方法を書いておきます。ちなみに transitionについてはVuetifyの以下のページにのっています。
https://vuetifyjs.com/en/framework/transitions

propsでmodeを設定します。 mode を設定すると トランジションのタイミングを指定することができます。Vue.jsでのトランジションでの説明は以下の公式サイトをご覧ください。

https://jp.vuejs.org/v2/guide/transitions.html

実際に使ってみます。以下のプログラムでは、ボタン( Alertの切り替え )をクリックすると緑のアラームから赤のアラームに切り替えることが出来ます。modeを設定しないと以下のように両方のアラームが同時に表示されます。mode=”out-in”と設定すると緑のアラームが消えてから赤のアラームが表示されるようになります。この時に注意点なのですが、keyは必ず設定してください。

<template>
  <div>
    <v-btn @click="alert = !alert">Alertの切り替え</v-btn>
    <v-scale-transition mode="out-in">
      <v-alert :value="true" color="green" v-if="alert" key="greenalert">
        propsのmodeを設定しています
      </v-alert>
      <v-alert :value="true" color="red" v-else key="redalert">
        propsのmodeを設定しています
      </v-alert>
    </v-scale-transition>
  </div>
</template>

<script>
export default {
    name: "alertsample",
    data: () => ({
        alert: true
    })
}
</script>

propsのoutlineを設定してみる

propsでoutlineを設定します。 outline を設定すると背景色を無くして、枠線のみになります。

<template>
  <v-alert :value="true" outline>
      propsのoutlineを設定しています
  </v-alert>
</template>

propsのtypeを設定してみる

propsでtypeを設定します。typeは 「success,info,warning,error」から選びます。それぞれ定義済みのcolorとiconが決められています。実際に使う時はこのtypeを使った方がwebサイト全体のデザインの統制がとれて良いと思います。

<template>
  <div>
    <v-alert :value="true" type="success">
      propsのtypeを設定しています
    </v-alert>
    <v-alert :value="true" type="info">
      propsのtypeを設定しています
    </v-alert>
    <v-alert :value="true" type="warning">
      propsのtypeを設定しています
    </v-alert>
    <v-alert :value="true" type="error">
      propsのtypeを設定しています
    </v-alert>
  </div>
</template>

propsのvalueを設定してみる

propsでvalueを設定します。valueはBoolean値を受け取りAlertの表示と非表示を切り替えます。v-modelでも同様に制御出来ます。