この記事は Vue 2.x 系、 Vuetify 2.x 系 を対象とした記事になります。
2022年3月、Vue 3.x 系統に対応した Vuetify 3 Beta がリリースされました。
Vuetify 3 Beta のインストールを試してみた記事もありますので、ぜひそちらもご覧ください。
対象の記事：Vuetify3 Betaをインストールしてみた件

ボタンをタップ、押した際に波紋の様に広がるエフェクト。リップルエフェクトと呼ばれるものですね。

Vuetifyでは、ボタン系のUIパーツで、
このリップルエフェクトがデフォルトで利用可能になっています。

たとえば v-btn などが代表的で、ボタンを押した位置を中心に、リップルエフェクトが適用されます。

今回は、このリップルエフェクトを外したり、色変更する方法について書いていきます。

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

Vuetifyは使いたいけれど、なんらかの理由で、
ボタンからリップルエフェクトは外したい。

案件によってはそういったケースもあるかと思います。

そんな時は、たとえば v-btn の場合、次の様に書くことでリップルエフェクトを外すことができます。

<v-btn
  v-bind:ripple="false"
  color="primary"
>
  ボタン
</v-btn>

↑ripple という prop に、falseを渡すだけです。
ちなみになぜ v-bind:ripple と書いて v-bind を使用しているかといえば、文字列ではなく真偽値をpropとして渡すからです。
この辺りの仕組みというか書き方のルールは、Vue.js公式サイトのこのページでも解説されています。

これは、v-btn以外でも、ripple という prop が
備わっているコンポーネントなら
同様にリップルエフェクトを外すことが可能です。(例えば v-chip など)

リップルエフェクトの色を変える

次の様に書くと、リップルエフェクトの色を変更することが可能です。

<v-btn
  :ripple="{ class: 'pink--text' }"
  text
>
  ボタン
</v-btn>

↑このように
ripple という prop に色名のclassを渡すことで、リップルエフェクトの色を変更することができます。

色は、
primary, secondary, info, success…
といった役割による色名キーワードの他、
Vuetifyに定義されているカラー名を (色名)–text のように指定することも可能です。

他の要素に自由に適用したい場合。v-ripple を使う

ここまでのセクションでは、v-btn を例に
リップルエフェクトを外す/色を変える、といったことを書いてきました。

Vuetifyでは、v-btn のように予め組み込まれているもの以外にも、
リップルエフェクト単体での利用もすることができます。

v-ripple を使うと、上のセクションでご紹介した方法と同じ記述で、
他の要素に自由にリップルエフェクトを適用することが可能です。

具体的には、次の様に書きます。

普通のdivにリップルエフェクトをつける

<div
  v-ripple
  style="padding: 2rem; width: 200px;"
>
  v-ripple を付与したdiv
</div>

↑2行目に注目してください。
単純に、v-ripple を付与することで、リップルエフェクト単体での着脱が可能になる、ということです。

普通のdivに付けたリップルエフェクトのカスタマイズ

上のセクションで書いた、v-btn の例と同じく、
色のカスタマイズなども可能です。次の様に色名のclassを渡します。

<div 
  v-ripple="{ class: `pink--text` }"
  style="padding: 2rem; width: 200px;"
>
  v-ripple を付与したdiv
</div>

この記事のまとめ

今回は、Vuetifyがデフォルトで持っているリップルエフェクトについて、
その制御方法と、v-ripple を使った単体での着脱方法について書きました。

・Vuetifyは使いたいけれど、今作っているサイトのこのページでは、リップルエフェクトを外したい。

または、

・このサイトのボタンには v-btn は使っていないけれど、リップルエフェクトだけを適用したい。

どちらのケースもあるかと思います。

些細なことに思うかもしれませんが、
こういう細かな部分で
ちゃんとカスタマイズ面の小回りが利く点も、Vuetifyの優れている点だと感じています。

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

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