Material Design 3 ve Web Components tabanlı yeni mdui 2 yayınlandı, mdui 2 dokümantasyonuna gidin.

Gölge

mdui, Material Design'daki her senaryonun ihtiyacını karşılayabilecek 24 farklı derinlikte gölge sağlar.

İlgili Okumalar

Material Design yönergeleri: Yükseklik ve gölgeler

Gölge ekle

Öğeye .mdui-shadow-[1-24] sınıfını eklemeniz yeterlidir; öğe ilgili derinlikte bir gölgeye sahip olacaktır. Gölgeyi kaldırmak için .mdui-shadow-0 sınıfını ekleyin.

Farklı derinliklerdeki gölge değişimlerini gözlemlemek için lütfen aşağıdaki kaydırıcıyı sürükleyin.

Fare üzerine geldiğinde gölgeyi derinleştir

Herhangi bir öğeye .mdui-hoverable sınıfını ekleyerek, fare ile üzerine gelindiğinde gölgenin derinleşmesini sağlayabilirsiniz.

Örnek

<div class="mdui-card mdui-hoverable">
  <div class="mdui-card-media">
    <img src="card.jpg"/>
  </div>
  <div class="mdui-card-actions">
    <button class="mdui-btn mdui-ripple">action 1</button>
    <button class="mdui-btn mdui-ripple">action 2</button>
  </div>
</div>

CSS Sınıf Listesi

Sınıf Adı	Açıklama
`.mdui-shadow-0`	Gölgeyi kaldır
`.mdui-shadow-[1-24]`	Farklı derinliklerde gölgeler ekleyin
`.mdui-hoverable`	Fare üzerine geldiğinde gölgeyi derinleştir

Yardımcı Sınıflar

Ripple Efekti