[Vue.js]Vuetifyを用いて綺麗にスタイリングされたボタンを扱う方法[v-btn]

Vuetify関連の記事_v-btnについて

Vuetifyでシンプルかつ、綺麗にスタイリングされたボタンを使ってみます

VuetifyのUIコンポーネントを実際に試してみるシリーズの記事、20回目になります。

以前の記事 [Vue.js, JavaScript]クリックされた要素を特定してdata属性から情報を取得する方法
v-chip という、
v-btn よりも小さいサイズの押せる要素について、少しだけふれました。

その記事を書いた時、
そういえば、v-btn についてはこれまで具体的に書いていなかったことに気づきまして、
こちらの v-btn は、比較的いろいろな props を簡単に試せることもあり、
良いサンプルになるのではと思いまして、今回の記事を書くことにしました。

Vuetifyの導入方法について等は、以前の記事:
[Vue.js]Vuetify のUIコンポーネントを使ってみる[v-slide, v-caroucel編]CDN経由での導入方法を、
[Vue.js] Vuetify を導入して Material Design をスマートに取り入れる方法 内に、CLI経由での導入方法 をご紹介しています。あわせてご覧ください。

v-btn を呼び出す基本コード

<template>
  <v-btn>button</v-btn>
</template>

↑Vuetify に定義されている v-btn コンポーネントを呼び出す基本形は、この様な形になります。
このデフォルトの状態で、

・色は #f5f5f5 (薄いグレー)
・font-sizeは 0.875rem (htmlのルートのfont-sizeが16pxなら、14px相当)
・高さが 36px
・最小の横幅が 64px
・クリックした時にリップルエフェクトが付いている

という状態のボタンが生成されます。
htmlとして展開された際の要素は、次のように
button 要素の中に span が入っている形のものが展開されます。

<button type="button" class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--default">
  <span class="v-btn__content">button</span>
</button>

ここに、他のコンポーネント同様
いろいろな prop に値を設定して、
カスタマイズして使う事ができる、
というわけです。

実際に表示してみた v-btn のサンプル

実際に動く v-btn のサンプルがあります。
次のリンクより、見ることができます。
Vuetify の v-btn のサンプル

いろいろなボタンを試してみる( v-btn がもつ props を見てみる)

では、 v-btn に指定できる、 prop についていくつか書いていきたいと思います。

色を変える

<template>
  <v-btn color="indigo" class="white--text">button</v-btn>
</template>

↑color という prop を指定すると、ボタンの色が変更できます。
他のコンポーネントと同じく、
指定できる色は、Material Color の色名指定、および css で指定可能な色が使えます。

濃い背景色と、dark という prop について

留意点として、color に濃い背景色を指定すると、文字色を白くしないと、ボタンの文字が読めなくなる点があります。

この時、Vuetifyの他のコンポーネントでは
dark という prop を使用して白文字を適用する例をよく見かけます。
しかし、
公式でも言及されていますが、実は
この v-btn コンポーネントでは、安易に dark という prop の使用は
避けるようにした方が良いとのことです。

その理由は、公式いわく 「無効状態が白背景と混ざっているため」 とのことです。

どういうことなのか、実際に併用してみるとわかるのですが、
dark という prop
disabled という prop を v-btn で併用すると、
本来ボタンが表示されるべき場所に、何も表示されない状態になってしまうことが確認できます。

Vuetify公式では、濃い背景色をボタンに指定した場合に白文字を設定したい場合、
単純に white–text という class を指定すれば、望む結果が得られるので
そうしてほしい、という意味のことが記載されています。

アイコンだけのボタンに変える

<template>
  <v-btn icon color="indigo">
    <v-icon>mdi-emoticon-happy-outline</v-icon>
  </v-btn>
</template>

↑icon という prop を指定すると、アイコンのみのボタンをつくることができます。
この場合、中に v-icon コンポーネントを内包して使用します。
上記の例では、 Material Desing Icons を使用してアイコンボタンをつくっています。

Vuetify公式 にも書かれていますが、Material Design Icons については、
次のリンク先を読み込むことで使用することができます。

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">

フローティングアクションボタンとして使う

<template>
  <v-btn
    class="white--text"
    fab
    color="indigo"
  >
    <v-icon class="white--text">
      mdi-plus
    </v-icon>
  </v-btn>
</template>

↑fab という prop を指定すると、円形のフローティング・アクション・ボタン(FAB)としての使用ができます。

ちなみにフローティング・アクション・ボタンというのは、
これのことですね。
Buttons: floating action button – Material Design

アウトラインスタイル

<template>
  <v-btn outlined color="indigo">
    button
  </v-btn>
</template>

↑outlined という prop を指定すると、外枠線のみを持ったシンプルなデザインに変更できます。

テキストのみの、枠を持たないボタン

<template>
  <v-btn text color="indigo">
    button
  </v-btn>
</template>

↑text という prop を指定すると、テキストのみのシンプルなボタンに変更できます。
シンプルながら、クリックした時のリップルエフェクトはそのまま持っていたり、元々の良さはそのまま残しているので、個人的にはすっきりしていて好きな prop です。

ボタンを角丸にする

<template>
  <v-btn rounded color="indigo" class="white--text">
    button
  </v-btn>
</template>

↑rounded という prop を指定すると、角丸のボタンに変更できます。
いちいち border-radius を使ってclass定義せずとも、用意されているというのはお手軽で良いですね。
(もちろん、cssでのカスタマイズも可能です)

タグの構造上の留意点など

そもそも Vuetify は、 Vue.js 上で動くUIフレームワークである以上、
ページ遷移には router によるリンクを使っていると思うので大丈夫だとは思うのですが、
この v-btn を、aタグで囲うのはやめた方が良い、
ということを、念のため書いておきたいと思います。

どういうことかと言うと、
html5 の仕様上、
実は button タグというものは
aタグで囲ってはいけない
というルールになっています(厳密には)。
厳密には、と言うのは、Chrome等のブラウザでは、buttonタグをaタグで囲ったリンクも動作するにはするのですが、
Firefox等一部のブラウザでは、その仕様が厳密に解釈されて、リンク自体が動作しない場合があるためです。
もちろん、Lintにかけるとエラーが出ることは言うまでもありませんが。

前述の通り、Vue.jsの場合、ページ遷移には
router によるリンクを使用する事が多いと思われるため
あまりないケースだとは思いますが、ごくごく稀に、静的なページに、
CDNを使って Vue や Vuetify を直接読み込んでいたりするページも
あるかもしれないので、念のため書いておくことにしました。
※おそらく、期間が短い単発のキャンペーンページ等では、もしかしたら上記のようなケースもあるかもしれないので。

各種 props を加えたサンプル

いくつかの props を加えたサンプルを、先ほどの基本形の下に作成してあります。
次のリンクより、確認する事ができます。
Vuetify の v-btn のサンプル

公式ドキュメント、APIページなど

v-btn コンポーネントの Vuetify公式ページは以下です。
ボタン・コンポーネント — Vuetify

また、公式APIページはこちらになります。他のコンポーネント同様、設定できる props の一覧が記載されています。
v-btn API — Vuetify

この記事のまとめ

今回は、Vuetify のたくさんのUIコンポーネントの中から、
v-btn についてご紹介しました。

基本的なUIパーツでありながら、
この v-btn は簡単な記述でいろいろな prop を試してみることができるので、
Vuetifyの他のUIコンポーネントを使う際の練習として、
最初に試すのに適しているコンポーネントの1つだと思います。
私自身も、Vuetifyにふれた時はまず、この v-btn 辺りから使ってみた記憶があります。

当サイトでは今後も Vue.js、 Vuetify に関する記事を掲載していく予定です。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。