near_me
Erste Schritte
keyboard_arrow_downlayers
Stil
keyboard_arrow_downwidgets
Komponenten
keyboard_arrow_downlocal_mall
Ressourcen
keyboard_arrow_downDas neue mdui 2 auf Basis von Material Design 3 und Web Components ist da. Zur mdui 2 Dokumentation wechseln.
Schatten
mdui bietet 24 verschiedene Schattentiefen an, die den Anforderungen jedes Szenarios in Material Design gerecht werden.
Verwandte Themen
Schatten hinzufügen
Fügen Sie einfach die Klasse .mdui-shadow-[1-24] zum Element hinzu, damit das Element den entsprechenden Schatten erhält. Durch Hinzufügen der Klasse .mdui-shadow-0 kann der Schatten entfernt werden.
Bitte bewegen Sie den untenstehenden Slider, um die Veränderungen der verschiedenen Schattentiefen zu beobachten.
Schatten beim Hovern vertiefen
Fügen Sie die Klasse .mdui-hoverable zu einem beliebigen Element hinzu, um den Schatten beim Hovern mit der Maus zu vertiefen.
Beispiel
<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>