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.
Chip
Chips können prägnante Informationen wie ein Bild oder ein kurzes Label enthalten.
Verwendung
Die Chip-Komponente ist rein per CSS umgesetzt; es reicht aus, den HTML-Code zu schreiben, damit sie funktioniert.
Verwandte Themen
Beispiel
<div class="mdui-chip">
<span class="mdui-chip-title">Example Chip</span>
</div>Beispiel
<div class="mdui-chip">
<img class="mdui-chip-icon" src="avatar1.jpg"/>
<span class="mdui-chip-title">Example Chip</span>
</div>Beispiel
<div class="mdui-chip">
<span class="mdui-chip-icon">A</span>
<span class="mdui-chip-title">Example Chip</span>
</div>Beispiel
<div class="mdui-chip">
<span class="mdui-chip-icon">
<i class="mdui-icon material-icons">face</i>
</span>
<span class="mdui-chip-title">Example Chip</span>
</div>Beispiel
<div class="mdui-chip">
<span class="mdui-chip-title">Example Chip</span>
<span class="mdui-chip-delete">
<i class="mdui-icon material-icons">cancel</i>
</span>
</div>Beispiel
<div class="mdui-chip">
<span class="mdui-chip-icon mdui-color-blue">
<i class="mdui-icon material-icons">face</i>
</span>
<span class="mdui-chip-title">Example Chip</span>
</div>