Effetto ripple
L'aggiunta dell'effetto ripple produce un effetto onda d'acqua che si diffonde verso l'esterno quando si fa clic sull'elemento.
Modalità d'uso
Basta aggiungere la classe .mdui-ripple per renderlo effettivo.
Istruzioni per l'uso
Aggiungere l'effetto ripple
Basta aggiungere la classe .mdui-ripple all'elemento per avere l'effetto ripple quando si fa clic su di esso.
<button class="mdui-btn mdui-ripple">button</button>
<button class="mdui-btn mdui-ripple mdui-color-blue">button</button>Se si desidera utilizzare l'effetto ripple su tag che non possono contenere sottoelementi come img, input, ecc., è necessario aggiungere .mdui-ripple al loro elemento padre.
<div class="mdui-ripple">
<img class="mdui-img-fluid" data-src="holder.js/100px250"/>
</div>Specificare il colore del ripple
Il ripple predefinito ha uno sfondo scuro. Quando viene specificato un colore di sfondo tramite .mdui-color-[color], o quando la pagina è in modalità scura, il ripple è bianco per impostazione predefinita.
È possibile specificare il colore del ripple aggiungendo la classe .mdui-ripple-[color].
<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>