Zcela nové mdui 2 založené na Material Design 3 a Web Components bylo vydáno, přejděte na dokumentaci mdui 2.

Stíny

mdui poskytuje 24 různých hloubek stínů, které mohou splnit jakýkoli scénář v Material Designu.

Související čtení

Designové zásady Material Design: Elevation a stín

Přidat stín

Stačí k prvku přidat třídu .mdui-shadow-[1-24] a prvek získá stín odpovídající hloubky. Přidáním třídy .mdui-shadow-0 lze stín odstranit.

Přetáhněte posuvník níže a pozorujte změny stínu v různých hloubkách.

Zesílí stín při přejetí myší.

Přidáním třídy .mdui-hoverable k jakémukoli prvku dosáhnete zesílení stínu při přejetí myší.

Příklad

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

Seznam CSS tříd

Název třídy	Popis
`.mdui-shadow-0`	Odebere stín.
`.mdui-shadow-[1-24]`	Přidá stín o různé hloubce.
`.mdui-hoverable`	Zesílí stín při přejetí myší.

Pomocné třídy

Efekt vlnění