near_me
Kezdetek
keyboard_arrow_downlayers
Stílus
keyboard_arrow_downwidgets
Komponensek
keyboard_arrow_downlocal_mall
Erőforrások
keyboard_arrow_downA Material Design 3 és Web Components alapú új mdui 2 már elérhető, tekintse meg az mdui 2 dokumentációját.
Ripple-effektus
A ripple-effektus hozzáadása után a kattintáskor egy kifelé terjedő hullámzás jelenik meg az elemen.
Használat
Csak adja hozzá a .mdui-ripple osztályt az aktiváláshoz.
Használat
Ripple-effektus hozzáadása
Csak adja hozzá a .mdui-ripple osztályt az elemhez, és az elemre kattintva megjelenik a ripple-effektus.
Példa
<button class="mdui-btn mdui-ripple">button</button>
<button class="mdui-btn mdui-ripple mdui-color-blue">button</button>Ha a ripple-effektust olyan tageken szeretné használni, amelyek nem tartalmazhatnak gyermekelemeket (például img, input stb.), a .mdui-ripple osztályt a szülőelemhez kell hozzáadni.
Példa
<div class="mdui-ripple">
<img class="mdui-img-fluid" data-src="holder.js/100px250"/>
</div>Ripple színének megadása
Az alapértelmezett ripple sötét hátterű. Ha a háttérszínt a .mdui-color-[color] osztállyal adja meg, vagy az oldal sötét módban van, a ripple alapértelmezés szerint fehér.
A ripple színét a .mdui-ripple-[color] osztály hozzáadásával határozhatja meg.
Példa
<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>