[javascript]vuetifyで使いそうなタグ４選

vuetifyゴリゴリの画面を触ったり触らなかったりしています。
今回はv-btn, v-list, v-alert, v-iconを使ってみて、簡単な使い方を書いているのと
属性でよく使いそうなものを載せてみました。

v-btn
1. v-btnで使いそうな属性
v-icon
1. v-iconで使いそうな属性
v-alert
1. v-alertで使いそうな属性
v-list
1. v-listで使いそうな属性
サンプル

v-btn

このタグを使うと、ボタンを作れます。

<v-btn color="success" @click="clickSuccess()">
  テストボタン１
</v-btn>

v-btnで使いそうな属性

icon：フラットな円形のボタンになる
text: ボタンの枠が消えてフラットなボタンになる
color: ボタンの色指定。指定できる属性は公式のcolorページで確認

公式リンク：

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

v-icon

アイコンを表示するためのタグ。
v-btnに入れたり、v-listのなかで使ったり、アイコンを表示したいところで使います。

標準がMaterial Design Iconsになっているので、ここからアイコンを選んで使います。

<v-btn color="blue" icon>
  <v-icon large>mdi-face</v-icon>
</v-btn>

v-iconタグの中に「mdi-アイコン名」で指定します。

v-iconで使いそうな属性

color: アイコンの色指定。
small, medium, large, x-large, x-small: アイコンのサイズ指定。ボタンとかもこれでサイズが変えられる。

公式リンク：

Icon component — Vuetify

The icon component is compatible with multiple common icon fonts such as Material Design Icons, Font Awesome and mor...

v-alert

アラートを作成するためのタグです。
画面上部の方に出てくるエラーとかに使われているやつです。

typeにsuccess, info, warning, errorを入れるとそれぞれの色が設定されます。
typeを指定せずに、color属性を使って好きな色指定もできます。

表示非表示はv-modelの変数でtrue,falseしてあげればOKです。

<v-alert type="success" v-model="successButtonAlert" dismissible>
  テストボタン１を押しました！
</v-alert>

v-alertで使いそうな属性

type:アラートのタイプを指定、それぞれの色とアイコンが表示される。
color:タイプを指定せずに、colorを指定してアラートの色を独自に変更できる
dismissible:アラートの右側にアラートを閉じるボタンが表示される

公式リンク：

Alert component — Vuetify

The v-alert component is used to convey information to the user. Designed to stand out, the alerts come in four cont...

v-list

リストを作るためのタグです。v-listとv-list-itemは一緒に使うみたいです。
アイコン表示にはv-list-item-iconで、テキストはv-list-item-contentに書くみたいです。

<v-list color="#4fc3f7">
  <v-list-item v-for="item in listItems" :key="item.title" @click="">
    <v-list-item-icon>
      <v-icon class="white--text">{{item.icon}}</v-icon>
    </v-list-item-icon>
    <v-list-item-content>
      <v-list-item-title v-text="item.title" class="white--text"></v-list-item-title>
    </v-list-item-content>
  </v-list-item>
</v-list>