mwc-ripple

Material Web Componentsの mwc-rippleはインク・リップル効果を提供するWebComponentです。

CSS

<mwc-ripple>というタグは、画面全体を装飾しますが、親要素にposition: relativeを指定することにより、描画範囲を限定できます。
よって、基本的には以下のような構成で用います。

<div style="position: relative">
<mwc-ripple></mwc-ripple>
</div>

また、 mwc-ripple: Ripple is not working since “0.14.0” version. #2139の説明のとおり、初期状態ではイベントハンドラがないため、リップル効果が作動しません。

デモコードのようにeventListenerを登録すると動作します。

mwc-rippleタグじたいにもselectedなどのプロパティを指定できます。
ReactなどのJSコンポーネントの部品として使う場合には、リファレンスを参考にプロパティを操作することで、動的に見た目を制御できます。

⁋ 2021/08/06↻ 2024/11/07