near_me
开始使用
keyboard_arrow_down
widgets
组件
keyboard_arrow_down
local_mall
资源
keyboard_arrow_down
添加涟漪动画效果后,会在点击元素时,产生向外扩散的水波纹效果。
只需添加类 .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>
主题色
主色
强调色