near_me
Primeros pasos
keyboard_arrow_downlayers
Estilo
keyboard_arrow_downwidgets
Componentes
keyboard_arrow_downlocal_mall
Recursos
keyboard_arrow_downEl nuevo mdui 2 basado en Material Design 3 y Web Components ya está disponible. Consulta la documentación de mdui 2 ahora.
Efecto Ripple
Al añadir el efecto ripple, se produce un efecto de onda que se expande al hacer clic en un elemento.
Modo de uso
Solo tienes que añadir la clase .mdui-ripple para que funcione.
Cómo usarlo
Añadir efecto ripple
Solo tienes que añadir la clase .mdui-ripple al elemento para que aparezca el efecto ripple al hacer clic.
Ejemplo
<button class="mdui-btn mdui-ripple">button</button>
<button class="mdui-btn mdui-ripple mdui-color-blue">button</button>Si quieres usar el efecto ripple en etiquetas como img, input, etc., que no pueden contener elementos secundarios, debes añadir .mdui-ripple a su elemento padre.
Ejemplo
<div class="mdui-ripple">
<img class="mdui-img-fluid" data-src="holder.js/100px250"/>
</div>Especificar el color del ripple
El ripple predeterminado usa un fondo oscuro. Cuando se especifica un color de fondo mediante .mdui-color-[color] o la página está en un tema oscuro, el ripple pasa a ser blanco por defecto.
Puedes especificar el color del ripple añadiendo la clase .mdui-ripple-[color].
Ejemplo
<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>