プログラムのお話

Vuetify.jsを使っていく Badges編

概要

今回はVuetify.jsjsのUIコンポーネントであるBadgesを使っていきます。公式サイトの説明を読んでみると、ユーザーに情報を強調する為に色々な種類のコンポーネントをラップすることでが出来るらしいです?
少し分かりにくいですが、Amazonを使っている人だとカートに入っている件数の表示などが該当します。あれは元のアイコンに数字を表示するコンポーネント(Badges)がラップしているイメージです。Badgesにはpropsを色々と指定して、機能を追加出来ます。それぞれのpropsを説明していこうと思います。

基本的なBadges

基本的なBadgesは以下のようになります。分かりやすいようにECサイトのカート風のBadgesを作成しました。


<template>
  <div class="mt-4 ml-4">
    <v-badge>
      <template v-slot:badge>
        <span>2</span>
      </template>
      <v-icon>
        shopping_cart
      </v-icon>
    </v-badge>
  </div>
</template>

propsのbottomを設定してみる

propsでbottomを設定します。bottomを設定するとBadgesの表示位置を右下に変更できます。デフォルトでは右上に表示されます。 windowsのデスクトップの右下のアイコンやvscodeのメニューのアイコンもBadgesが右下に表示されています。

<template>
  <div class="mt-4 ml-4">
    <v-badge bottom>
      <template v-slot:badge>
        <span>2</span>
      </template>
      <v-icon>
        shopping_cart
      </v-icon>
    </v-badge>
  </div>
</template>

propsのleftを設定してみる

propsでleftを設定します。leftを設定するとBadgesの表示位置を左上に変更出来ます。デフォルトでは右上に表示されます。

<template>
  <div class="mt-4 ml-4">
    <v-badge left>
      <template v-slot:badge>
        <span>2</span>
      </template>
      <v-icon>
        shopping_cart
      </v-icon>
    </v-badge>
  </div>
</template>

<script>
export default {
  name: "badgessample"
}
</script>

また、leftはbottomと組み合わせて使うことが出来ます。その場合Badgesの表示位置が左下になります。

<template>
  <div class="mt-4 ml-4">
    <v-badge left bottom>
      <template v-slot:badge>
        <span>2</span>
      </template>
      <v-icon>
        shopping_cart
      </v-icon>
    </v-badge>
  </div>
</template>

propsのcolorを設定してみる

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

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

<template>
  <div class="mt-4 ml-4">
    <v-badge color="green">
      <template v-slot:badge>
        <span>2</span>
      </template>
      <v-icon>
        shopping_cart
      </v-icon>
    </v-badge>
  </div>
</template>

propsのtransition&modeを設定してみる

propsでtransitionとmodeを設定していこうと思ったのですが、使い方がよく分からなかったです。変わりに vuetifyvuetifyのトランジション機能を提供するコンポーネントを使っていきます。以下のコードはボタンをクリックする度にカウントが上がっていきます。10以上を超えた場合にカウントアップ出来なくなり、アイコンが変化します。このアイコンが変更する過程をトランジションでアニメーションを追加します。また、このままのコードのままでは変化後のアイコンと変化前のアイコンが同時に表示されてしまうので、mode=”out-in”を追加します。追加すると消えるアニメーションが優先されて、完全に前のアイコンが消えてから新しいアイコンが表示されます。

<template>
  <div class="mt-4 ml-4">
    <v-scale-transition>
      <v-badge v-if="count < 11" key="first">
        <template v-slot:badge>
          <span>{{ count }}</span>
        </template>
        <v-icon key="first">
          shopping_cart
        </v-icon>
      </v-badge>
      <v-badge v-else key="second">
        <template v-slot:badge>
          <span>{{ count }}</span>
        </template>
        <v-icon key="first">
          remove_shopping_cart
        </v-icon>
      </v-badge>
    </v-scale-transition>
    <div>
      <v-btn @click="countUp()">COUNT UP !!</v-btn>
    </div>
  </div>
</template>

<script>
export default {
  name: "badgessample",
  data: () => ({
      count: 0
  }),
  methods: {
    countUp(){
        if(this.count < 11){
            this.count = this.count + 1
        }
    }
  }
}
</script>

<v-scale-transition mode="out-in">

propsのoverlapを設定してみる

propsでoverlapを設定します。overlapを設定するとBadgesがラップする対象のアイコンと重なるように表示されます。また、leftやbottomを併用が可能です。

<template>
  <div class="mt-4 ml-4">
    <v-badge overlap>
      <template v-slot:badge>
        <span>2</span>
      </template>
      <v-icon>
        shopping_cart
      </v-icon>
    </v-badge>
  </div>
</template>

<template>
  <div class="mt-4 ml-4">
    <v-badge overlap left bottom>
      <template v-slot:badge>
        <span>2</span>
      </template>
      <v-icon>
        shopping_cart
      </v-icon>
    </v-badge>
  </div>
</template>

propsのvalueを設定してみる

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