A Material Design 3 és Web Components alapú új mdui 2 már elérhető, tekintse meg az mdui 2 dokumentációját.

Árnyék

Az mdui 24 különböző mélységű árnyékot kínál, amelyek megfelelnek a Material Design bármely forgatókönyvének.

Kapcsolódó olvasmányok

Material Design tervezési irányelvek: Magasság és árnyékok

Árnyék hozzáadása

Csak adja hozzá a .mdui-shadow-[1-24] osztályt az elemhez, és az elem a megfelelő mélységű árnyékkal fog rendelkezni. A .mdui-shadow-0 osztály hozzáadásával eltávolítható az árnyék.

Húzza az alábbi csúszkát az árnyék mélységének változásának megfigyeléséhez.

Árnyék mélyítése egérlebegtetéskor

Adja hozzá a .mdui-hoverable osztályt bármely elemhez, hogy az egérlebegtetéskor (hover) mélyebb árnyékot kapjon.

Példa

<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 osztályok listája

Osztálynév	Leírás
`.mdui-shadow-0`	Árnyék eltávolítása
`.mdui-shadow-[1-24]`	Különböző mélységű árnyékok hozzáadása
`.mdui-hoverable`	Árnyék mélyítése egérlebegtetéskor

Segédosztályok

Ripple-effektus