near_me
Getting Started
keyboard_arrow_downlayers
Style
keyboard_arrow_downwidgets
Components
keyboard_arrow_downlocal_mall
Resources
keyboard_arrow_downThe new mdui 2 based on Material Design 3 and Web Components is now available. Check out the mdui 2 documentation.
Ripple
After adding the ripple effect, a water ripple effect that spreads outward will be generated when the element is clicked.
Usage
Simply add the class .mdui-ripple to make it take effect.
Usage
Add ripple effect
Simply add the class .mdui-ripple to an element to give it a ripple effect when clicked.
Example
<button class="mdui-btn mdui-ripple">button</button>
<button class="mdui-btn mdui-ripple mdui-color-blue">button</button>If you want to use the ripple effect on tags that cannot contain child elements, such as img or input, you need to add .mdui-ripple to their parent element.
Example
<div class="mdui-ripple">
<img class="mdui-img-fluid" data-src="holder.js/100px250"/>
</div>Specify ripple color
The default ripple is for dark backgrounds. When the background color is specified via .mdui-color-[color], or when the page is in a dark theme, the ripple defaults to white.
The ripple color can be specified by adding the class .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>