KumaTechLab
/

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

Category :
JavaScriptコードレシピ集

JavaScriptコードレシピ集

なにかやりたい場面に応じてコードを探せるのが便利! JavaScriptを少しずつ書けるようになりたい人やWordPressなど基本的には使わないけどたまに使う人向け!

ハンズオンJavaScript

ハンズオンJavaScript

javascriptについて体系的に学びたい際におすすめ! 基礎的な文法から実用てきな内容、Webでの働き、ストレージ、セキュリティなど網羅的に学ぶことができます。

Read next

2020 KumaTechLab.