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.
Chip
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 <code>.mdui-ripple</code> to make it take effect.
Example
<div class="mdui-chip">
<span class="mdui-chip-title">Example Chip</span>
</div>Example
<div class="mdui-chip">
<img class="mdui-chip-icon" src="avatar1.jpg"/>
<span class="mdui-chip-title">Example Chip</span>
</div>Example
<div class="mdui-chip">
<span class="mdui-chip-icon">A</span>
<span class="mdui-chip-title">Example Chip</span>
</div>Simply add the class <code>.mdui-ripple</code> to an element to give it a ripple effect when clicked.
Example
<div class="mdui-chip">
<span class="mdui-chip-icon">
<i class="mdui-icon material-icons">face</i>
</span>
<span class="mdui-chip-title">Example Chip</span>
</div>If you want to use the ripple effect on tags that cannot contain child elements, such as <code>img</code> or <code>input</code>, you need to add <code>.mdui-ripple</code> to their parent element.
Example
<div class="mdui-chip">
<span class="mdui-chip-title">Example Chip</span>
<span class="mdui-chip-delete">
<i class="mdui-icon material-icons">cancel</i>
</span>
</div>The default ripple is for dark backgrounds. When the background color is specified via <code>.mdui-color-[color]</code>, or when the page is in a dark theme, the ripple defaults to white.
Example
<div class="mdui-chip">
<span class="mdui-chip-icon mdui-color-blue">
<i class="mdui-icon material-icons">face</i>
</span>
<span class="mdui-chip-title">Example Chip</span>
</div>