near_me
Başlarken
keyboard_arrow_downlayers
Stil
keyboard_arrow_downwidgets
Bileşenler
keyboard_arrow_downlocal_mall
Kaynaklar
keyboard_arrow_downMaterial Design 3 ve Web Components tabanlı yeni mdui 2 yayınlandı, mdui 2 dokümantasyonuna gidin.
Ripple Efekti
Ripple efekti eklendiğinde, bir öğeye tıklandığında dışa doğru yayılan bir dalga efekti oluşur.
Kullanım
Etkinleştirmek için .mdui-ripple sınıfını eklemeniz yeterlidir.
Kullanım
Ripple efekti ekle
Öğeye .mdui-ripple sınıfını eklemeniz yeterlidir; öğeye tıklandığında bir ripple efekti oluşacaktır.
Örnek
<button class="mdui-btn mdui-ripple">button</button>
<button class="mdui-btn mdui-ripple mdui-color-blue">button</button>Ripple efektini img, input gibi alt öğe içeremeyen etiketlerde kullanmak için .mdui-ripple sınıfını bunların ana öğesine eklemeniz gerekir.
Örnek
<div class="mdui-ripple">
<img class="mdui-img-fluid" data-src="holder.js/100px250"/>
</div>Ripple rengini belirtin
Varsayılan ripple efekti koyu bir arka plana sahiptir. Arka plan rengi .mdui-color-[color] aracılığıyla belirtildiğinde veya sayfa koyu tema modunda olduğunda, ripple efekti varsayılan olarak beyazdır.
Ripple rengini belirtmek için .mdui-ripple-[color] sınıfı eklenebilir.
Örnek
<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>