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

JavaScript

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

v-btn


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

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

v-btnで使いそうな属性

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

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: アイコンのサイズ指定。ボタンとかもこれでサイズが変えられる。

v-alert


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

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

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

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

v-alertで使いそうな属性

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

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>

v-listで使いそうな属性

・v-list
– rounded:ホバーしたときの明るくする箇所を角丸にする
– two-line:タイトルとサブタイトル2行のリストを作成する
– three-line:タイトル・サブタイトルx2の3行のリストを作成する

・v-list-item
– v-for:javascriptの連想配列をループしてリストを作成できる

サンプル

コメント

タイトルとURLをコピーしました