near_me
はじめる
keyboard_arrow_downwidgets
コンポーネント
keyboard_arrow_downlocal_mall
リソース
keyboard_arrow_downMaterial Design 3 と Web Components をベースにした新しい mdui 2 がリリースされました。mdui 2 ドキュメントはこちら。
リップル効果
リップル効果を追加すると、要素をクリックしたときに外側に広がる同心円状の波紋効果が発生します。
使用方法
クラス .mdui-ripple を追加するだけで有効になります。
例
<button class="mdui-btn mdui-ripple">button</button>
<button class="mdui-btn mdui-ripple mdui-color-blue">button</button>img や input など、子要素を含めることができないタグでリップル効果を使用するには、その親要素に .mdui-ripple を追加する必要があります。
例
<div class="mdui-ripple">
<img class="mdui-img-fluid" data-src="holder.js/100px250"/>
</div>リップルカラーを指定
デフォルトのリップルは暗い背景用です。.mdui-color-[color] で背景色が指定されている場合、またはページがダークテーマの場合は、リップルはデフォルトで白になります。
クラス .mdui-ripple-[color] を追加することで、リップルの色を指定できます。
例
<button class="mdui-btn mdui-ripple mdui-ripple-black mdui-color-yellow">black</button>
<button class="mdui-btn mdui-ripple mdui-ripple-white mdui-color-blue">white</button>
<button class="mdui-btn mdui-ripple mdui-ripple-red">red</button>
<button class="mdui-btn mdui-ripple mdui-ripple-blue">blue</button>