Material Design Rippleの使い方

Material Design Rippleの使い方

Material Design のRippleの使い方を紹介します。

Material DesignのCDNを利用することで簡単にリップル使用することができます。

使い方

読み込むのはこの二つ

<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

次にHTML側のマークアップ

<button class="button mdc-ripple-surface">ボタン</button>

マークアップした箇所のセレクタをjsで指定します。

mdc.ripple.MDCRipple.attachTo(document.querySelector('.button'));

これで以下のようなボタンになります。

タッチした箇所から波が広がるようなデザインです。

mdc-ripple-surfaceがリップル表現のクラスになっています。

きれいなリップルをjsなどで組む必要なく利用できます。

色の変更やもっと細かい設定を行いたい場合はSassを利用して行う必要があります。

Material Design ripple