Nowy mdui 2 oparty na Material Design 3 i Web Components jest już dostępny, przejdź do dokumentacji mdui 2.

Cień

mdui oferuje 24 różne głębokości cieni, które mogą zaspokoić potrzeby dowolnej sceny w Material Design.

Powiązane artykuły

Wytyczne projektowe Material Design: Elewacja i cienie

Dodawanie cienia

Wystarczy dodać do elementu klasę .mdui-shadow-[1-24], aby element posiadał cień o odpowiedniej głębokości. Dodanie klasy .mdui-shadow-0 usuwa cień.

Przeciągnij suwak poniżej, aby zaobserwować zmiany cienia o różnej głębokości.

Pogłębienie cienia po najechaniu myszą

Dodanie klasy .mdui-hoverable do dowolnego elementu pogłębi cień po najechaniu myszą.

Przykład

<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>

Lista klas CSS

Nazwa klasy	Opis
`.mdui-shadow-0`	Usuwanie cienia
`.mdui-shadow-[1-24]`	Dodawanie cieni o różnej głębokości
`.mdui-hoverable`	Pogłębienie cienia po najechaniu myszą

Klasy pomocnicze

Efekt ripple