near_me
Rozpoczęcie
keyboard_arrow_downlayers
Styl
keyboard_arrow_downwidgets
Komponenty
keyboard_arrow_downlocal_mall
Zasoby
keyboard_arrow_downNowy mdui 2 oparty na Material Design 3 i Web Components jest już dostępny, przejdź do dokumentacji mdui 2.
Efekt ripple
Po dodaniu efektu ripple, po kliknięciu elementu powstanie efekt fali rozchodzącej się na zewnątrz.
Sposób użycia
Wystarczy dodać klasę .mdui-ripple, aby efekt zaczął działać.
Sposób użycia
Dodawanie efektu ripple
Wystarczy dodać klasę .mdui-ripple do elementu, aby przy kliknięciu pojawił się efekt ripple.
Przykład
<button class="mdui-btn mdui-ripple">button</button>
<button class="mdui-btn mdui-ripple mdui-color-blue">button</button>Aby użyć efektu ripple na znacznikach takich jak img czy input, które nie mogą zawierać elementów podrzędnych, należy dodać klasę .mdui-ripple do ich elementu nadrzędnego.
Przykład
<div class="mdui-ripple">
<img class="mdui-img-fluid" data-src="holder.js/100px250"/>
</div>Określanie koloru efektu ripple
Domyślnie efekt ripple ma ciemne tło. Gdy kolor tła zostanie określony za pomocą .mdui-color-[color] lub gdy strona jest w trybie ciemnym, efekt ripple jest domyślnie biały.
Można określić kolor efektu ripple, dodając klasę .mdui-ripple-[color].
Przykład
<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>