プログラムのお話

Vuetify.jsを使っていく Avatars編

概要

今回はVuetify.jsのAvatarを使っていきます。公式サイトの説明だと 一般的にプロフィール写真を表示するために使用されるらしいです。

基本的なAvatar

基本的なBadgesは以下のようになります。人のアイコンが表示されているだけですが、 propsでサイズを調整したり、色を変えたり、枠線の形状を変えたりすることが出来ます。

<template>
  <div class="mt-4 ml-4">
    <v-avatar>
      <v-icon>person</v-icon>
    </v-avatar>
  </div>
</template>

propsのcolorを設定してみる

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

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

<template>
  <div class="mt-4 ml-4">
    <v-avatar color="blue">
      <v-icon>person</v-icon>
    </v-avatar>
  </div>
</template>

propsのsizeを設定してみる

propsでsizeを設定します。sizeを設定すると Avatarsの大きさを変えることが出来ます。一番左のavatarsは通常のサイズは48です。右にしたがって18ずつ大きくしています。

<template>
  <div class="mt-4 ml-4">
    <v-avatar color="blue">
      <v-icon>person</v-icon>
    </v-avatar>
    <v-avatar color="blue" size="64">
      <v-icon>person</v-icon>
    </v-avatar>
    <v-avatar color="blue" size="80">
      <v-icon>person</v-icon>
    </v-avatar>
  </div>
</template>

propsのtileを設定してみる

propsでtileを設定します。tileを設定するとAvatarsの枠線が丸から四角になります。

<template>
  <div class="mt-4 ml-4">
    <v-avatar color="blue" tile>
      <v-icon>person</v-icon>
    </v-avatar>
  </div>
</template>

おまけ

Avatarsのpropsの種類は少ないのでおまけを書いていこうと思います。以下の例と見てみてください。BadgesとAvatarsを組み合わせてます。これはメールが複数件届いてる状況に使えます。こうすることでユーザーに新着メールが届いてることがすぐに分かります。

<template>
  <div class="mt-4 ml-4">
    <v-badge>
      <template v-slot:badge>
        <span>6</span>
      </template>
      <v-avatar color="blue">
        <v-icon>mail</v-icon>
      </v-avatar>
    </v-badge>
  </div>
</template>