[Vuetify3]Vue.js3に対応した綺麗なボタンを使う方法[v-btn]

2022年11月1日に満を持してリリースされた
Vuetify 3 (コードネーム：Titan)。
この記事を書いている現在(2022年11月20日)、早くも version 3.0.1 に更新されている様です。

今回は、その Vuetify 3 の優れた数々のコンポーネントの中から、
綺麗にデザインされたボタンを使用する事ができる
v-btn の使用方法について、記事を書いていきます。

こちらの v-btn 、Vuetify を知る上で
比較的とっつきやすく、かつ使い方を覚えると色々な場所で使用できるので
個人的にとても好きなUIコンポーネントになります。

なお、この記事を書いた際に Vue3, Vuetify3 を動作させている環境は次のとおりです。
参考までにご確認ください。
・Mac OS Montrey (12.3.1)
・Node.js v16.18.1
↑この Node.js のバージョンは、 Corepack が同梱されているバージョン( v16.10以降 )を使用することをお勧めします。

v-btn の使用方法

では早速、v-btn の使用方法です。

v-btn は、5種類の見た目を切り替える事ができます。
・default(初期状態)
・outlined
・tonal
・text
・plain

これらは、その名称を variant という prop に渡してあげる事で、簡単に指定できます。
※styleは、ボタンがくっつかない様にだけ、親要素にサンプルとして直書きで簡素に当てています。実際はclass名で指定してあげるのが良いです。

[template側]

<div style="display: flex; gap: 1rem; justify-content: center;">
  <v-btn>Vue.js</v-btn>
  <v-btn variant="outlined">Vuetify3</v-btn>
  <v-btn variant="tonal">Gatsby</v-btn>
  <v-btn variant="text">React</v-btn>
  <v-btn variant="plain">WordPress</v-btn>
</div>

outlined は、塗りなしの細い罫線を持ったスタイルのボタンに。
tonal は、その言葉(tonal、トーナル)が示す通り中間調に調整された色味のボタンになります。
配色理論でトーナル配色、と言うものがありますが、まさにそんな感じで「中間の彩度/明度(彩度はやや低め)」の色味のボタンになります。
text は、文字のみのシンプルなボタンに。
plain は、textとよく似た文字通り、プレーンな(あっさりした、簡素な)印象のボタンになります。

色を変えてみる

色を変えるには、v-radio, v-switch, v-checkbox など他のコンポーネント同様に
color という prop を使うと、次の様なコードで
ボタンの色を変えることが可能です。
※styleは、ボタンがくっつかない様にだけ、親要素にサンプルとして直書きで簡素に当てています。実際はclass名で指定してあげるのが良いです。

[template側]

<div style="display: flex; gap: 1rem; justify-content: center;">
  <v-btn color="hsla(200, 80%, 50%, 1)">Vue.js</v-btn>
  <v-btn color="hsla(200, 80%, 50%, 1)" variant="outlined">Vuetify3</v-btn>
  <v-btn color="hsla(200, 80%, 50%, 1)" variant="tonal">Gatsby</v-btn>
  <v-btn color="hsla(200, 80%, 50%, 1)" variant="text">React</v-btn>
  <v-btn color="hsla(200, 80%, 50%, 1)" variant="plain">WordPress</v-btn>
</div>

渡せる色の値は
material design に定義されている色名や
cssで指定できる値( color="#1AA1E5" や color="hsla(200, 80%, 50%, 1)" の様に指定 )
等を使用する事ができます。

ここで面白いのは、上のセクションでご紹介した variant="tonal" です。
まったく同じ color の値を指定しても、ちゃんと色味を抑えたボタンに変化する事がわかります。
この挙動は、同じボタンで異なる状態を作るときなどに役立ちそうですね。

色変更以外にも、設定可能な複数の prop があります。
設定可能な prop 一覧については、
公式サイトの次のページに解説があります。
v-btn API — Vuetify

押したら何かを実行するには

こちらは Vue 2 の頃と同様です。
v-on:click, または @click を使って実行する挙動を指定する事で、
ボタンを押したときに何らかの処理を実行する事ができます。

具体的には、次の様に書きます。
※styleは、ボタンがくっつかない様にだけ、親要素にサンプルとして直書きで簡素に当てています。実際はclass名で指定してあげるのが良いです。

[template側]

<div style="margin: 0 auto 2rem; gap: 1rem; display: flex; justify-content: center;">
  <v-btn color="hsla(200, 80%, 50%, 1)" v-on:click="myFunction">Vue.js</v-btn>
  <v-btn color="hsla(200, 80%, 50%, 1)" @click="myFunction">Vue.js</v-btn>
</div>

↑この様に、v-on:click, または @click どちらでも何らかの挙動を実行する事ができます。

実行する関数は、たとえば次の様に定義します。

[script側]

<script>
  import { ref } from 'vue'
  export default {
    setup() {
      ...(中略)...
      const myFunction = () => {
        alert('v-btn 良い。すごく良い。');
      }
      return {
        ...(中略)...
        myFunction
        ...(中略)...
      }
    }
  }
</script>

↑この様に、setup関数の中に関数を定義しておき、returnしておきます。
これを v-on:click, または @click でボタンと紐づける事で、何らかの処理を実行する事が可能です。

また、次の様に methods 内で定義した関数も実行する事が可能です。

[script側]

<script>
  import { ref } from 'vue'
  export default {
    setup() {
      ...(中略)...
      const myFunction = () => {
        alert('v-btn 良い。すごく良い。');
      }
      return {
        ...(中略)...
        myFunction
        ...(中略)...
      }
    }
  },
  methods: {
    myFunction2() {
      alert('methods内のも実行できるんですね。使うかどうかはさておき');
    }
  }
}
</script>

template側は次の様に。
※styleは、ボタンがくっつかない様にだけ、親要素にサンプルとして直書きで簡素に当てています。実際はclass名で指定してあげるのが良いです。

[template側]

<div style="gap: 1rem; display: flex; justify-content: center;">
  <v-btn color="hsla(200, 80%, 50%, 1)" v-on:click="myFunction">Vue.js</v-btn>
  <v-btn color="hsla(200, 80%, 50%, 1)" @click="myFunction2">Vue.js</v-btn>
</div>

↑上記の様に、methods の中で定義した関数も実行できます。
ただし CompositionAPI を使うなら、setup関数からアクセスできる部分に関しては setup() の中で定義するのが、管理の面でも良いと思います。

リップルエフェクトを外すには

マテリアルデザインの特徴的なエフェクトとして、ボタンを押した際に広がる
波紋の様なエフェクト、リップルエフェクトがあります。

いかにもそれらしくて良いには良いのですが、
何らかの理由でそのエフェクトをオフにしたい場合。実際の案件によってはあるかと思います。

その場合は、次の様に書く事でリップルエフェクトをオフにする事が可能です。
※styleは、ボタンがくっつかない様にだけ、親要素にサンプルとして直書きで簡素に当てています。実際はclass名で指定してあげるのが良いです。

[template側]

<div style="gap: 1rem; display: flex; justify-content: center;">
  <v-btn color="hsla(200, 80%, 50%, 1)" v-bind:ripple="false">Vue.js</v-btn>
  <v-btn color="hsla(200, 80%, 50%, 1)" v-bind:ripple="false">Vue.js</v-btn>
</div>

↑何らかの理由でリップルエフェクトをオフにしたい場合。
その場合は v-bind:ripple="false" を指定します。
なぜ v-bind するのか、という疑問に関しては、以前書いた次の記事で詳しく触れていますので、併せてご覧ください。
[Vuetify]リップルエフェクトを着脱したり色変更したりする方法[v-ripple]

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

Vuetify3 の v-btn を実際に表示してみたサンプルは、次のリンクより確認できます。

Vuetify3に対応したv-btnサンプル

Vuetify3 公式の v-btn 解説ページ

Vuetify3 公式の、v-btn についての公式解説ページは以下になります。
Button component – Vuetify

v-btn で使用する事ができる props の一覧、詳細な仕様がまとめられている公式ページは以下になります。
v-btn API — Vuetify

Vuetify3 のUIコンポーネントを実際に使ってみた他の記事

現時点で、Vuetify3のUIコンポーネントを実際に使ってみた記事は、次のものがあります。

※ 随時更新中です！！

この記事のまとめ

今回は Vuetify 3 の優れた数々のコンポーネントの中から、

v-btn について、記事を書いてみました。

冒頭でも書きましたが、
こちらの v-btn 、Vuetify を知る上で
比較的とっつきやすく、かつ使い方を覚えると色々な場所で使用でき、
そしてボタンを押した際の関数との紐付けについても知る事ができるので、
Vuetify の入口で知るのにうってつけの、
個人的にオススメのUIコンポーネントになります。

この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。

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

この記事をシェアする：