使用方法
添加涟漪效果
只需在元素上添加类 .mdui-ripple
,点击元素时就会有涟漪动画效果。
Example
<button class="mdui-btn mdui-ripple">button</button>
<button class="mdui-btn mdui-ripple mdui-color-blue">button</button>
如果要在 img
、input
等无法拥有子元素的标签上使用,需要把 .mdui-ripple
添加到它的父元素上。
Example
<div class="mdui-ripple">
<img class="mdui-img-fluid" data-src="holder.js/100px250"/>
</div>
指定涟漪颜色
默认的涟漪为深色背景,当通过 .mdui-color-[color]
指定了背景色、或在深色主题下时,涟漪默认为白色。
可通过添加类 .mdui-ripple-[color]
来指定涟漪颜色。
Example
<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>
CSS 类名列表
类名 |
效果 |
.mdui-ripple |
添加涟漪效果 |
.mdui-ripple-[color] |
指定涟漪颜色 |