near_me
Začínáme
keyboard_arrow_downlayers
Styl
keyboard_arrow_downwidgets
Komponenty
keyboard_arrow_downlocal_mall
Zdroje
keyboard_arrow_downZcela nové mdui 2 založené na Material Design 3 a Web Components bylo vydáno, přejděte na dokumentaci mdui 2.
Efekt vlnění
Po přidání efektu vlnky (ripple) se při kliknutí na prvek zobrazí efekt vlnky rozšiřující se ven.
Způsob volání
Stačí přidat třídu .mdui-ripple a bude to fungovat.
Způsob použití
Přidejte efekt zvlnění
Stačí přidat třídu .mdui-ripple na prvek, a při kliknutí na prvek se objeví efekt vlnky.
Příklad
<button class="mdui-btn mdui-ripple">button</button>
<button class="mdui-btn mdui-ripple mdui-color-blue">button</button>Pokud chcete použít efekt vlnky na značkách jako img, input atd., které nemohou obsahovat podřízené prvky, musíte přidat .mdui-ripple do nadřazeného prvku.
Příklad
<div class="mdui-ripple">
<img class="mdui-img-fluid" data-src="holder.js/100px250"/>
</div>Určete barvu vlnky
Výchozí vlnka je na tmavém pozadí. Pokud je na pozadí zadána barva přes .mdui-color-[color] nebo je stránka v tmavém motivu, je vlnka standardně bílá.
Barvu vlnky můžete určit přidáním třídy .mdui-ripple-[color].
Příklad
<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>