near_me
Introdução
keyboard_arrow_downlayers
Estilo
keyboard_arrow_downwidgets
Componentes
keyboard_arrow_downEfeito rippleBotãoBotão de ação flutuanteCampo de seleçãoDivisorPainel colapsávelCampo de textoControles de seleçãoSliderListaControles de listaLista em gradeAbaBarra de ferramentasBarra de aplicativoGaveta de navegaçãoBarra de navegação inferiorCardChipTooltipSnackbarTabelaDiálogoMenuBarra de progresso
local_mall
Recursos
keyboard_arrow_downO novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.
Efeito ripple
Ao adicionar o efeito ripple, um efeito de ondulação de água se espalhará para fora ao clicar no elemento.
Como usar
Basta adicionar a classe .mdui-ripple para que o efeito seja aplicado.
Como usar
Adicionar efeito ripple
Basta adicionar a classe .mdui-ripple ao elemento para ter o efeito ripple ao clicar nele.
Exemplo
<button class="mdui-btn mdui-ripple">button</button>
<button class="mdui-btn mdui-ripple mdui-color-blue">button</button>Se você quiser usar o efeito ripple em elementos que não podem conter elementos filhos, como img e input, você deve adicionar .mdui-ripple ao elemento pai.
Exemplo
<div class="mdui-ripple">
<img class="mdui-img-fluid" data-src="holder.js/100px250"/>
</div>Especificar a cor do ripple
O ripple padrão tem um fundo escuro. Quando a cor de fundo é especificada através de .mdui-color-[color], ou a página está no modo escuro, o ripple assume o padrão branco.
A cor do ripple pode ser especificada adicionando a classe .mdui-ripple-[color].
Exemplo
<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>