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を利用して行う必要があります。