Ripple-Effekt
Nach dem Hinzufügen des Ripple-Effekts entsteht beim Klicken auf das Element ein nach außen diffundierender Wasserwellen-Effekt.
Verwendung
Fügen Sie einfach die Klasse .mdui-ripple hinzu, damit er wirksam wird.
Verwendung
Ripple-Effekt hinzufügen
Fügen Sie einfach die Klasse .mdui-ripple zum Element hinzu, und beim Klicken auf das Element entsteht ein Ripple-Effekt.
<button class="mdui-btn mdui-ripple">button</button>
<button class="mdui-btn mdui-ripple mdui-color-blue">button</button>Wenn Sie den Ripple-Effekt auf Tags wie img oder input verwenden möchten, die keine Kindelemente enthalten können, müssen Sie .mdui-ripple zum Elternelement hinzufügen.
<div class="mdui-ripple">
<img class="mdui-img-fluid" data-src="holder.js/100px250"/>
</div>Ripple-Farbe festlegen
Standardmäßig ist der Ripple dunkel. Wenn eine Hintergrundfarbe über .mdui-color-[color] festgelegt wurde oder sich die Seite in einem dunklen Design befindet, ist der Ripple standardmäßig weiß.
Die Ripple-Farbe kann durch Hinzufügen der Klasse .mdui-ripple-[color] festgelegt werden.
<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>