near_me
Kezdetek
keyboard_arrow_downlayers
Stílus
keyboard_arrow_downwidgets
Komponensek
keyboard_arrow_downlocal_mall
Erőforrások
keyboard_arrow_downA Material Design 3 és Web Components alapú új mdui 2 már elérhető, tekintse meg az mdui 2 dokumentációját.
Ikon
Az mdui 932 beépített Material Icont tartalmaz. Ezeken kívül harmadik féltől származó ikonokat is használhat.
Kapcsolódó olvasmányok
Használati példák
Kilistáztuk az összes Material Icon ikont, egyszerűen az ikonra kattintva másolhatja annak kódját.
Példa
<i class="mdui-icon material-icons">check_box</i>
<i class="mdui-icon material-icons mdui-text-color-red">check_box</i>
<i class="mdui-icon material-icons mdui-text-color-theme">check_box</i>Ha az ikont lapos gombban vagy lebegő gombban használják, hozzá kell adni az mdui-icon-left vagy mdui-icon-right osztályt, hogy az ikon a gomb bal vagy jobb oldalán helyezkedjen el.
Példa
<button class="mdui-btn mdui-color-theme-accent mdui-ripple">
<i class="mdui-icon mdui-icon-left material-icons">share</i> Share
</button>
<button class="mdui-btn mdui-color-theme-accent mdui-ripple">
<i class="mdui-icon mdui-icon-right material-icons">share</i> Share
</button>
<button class="mdui-btn mdui-color-yellow mdui-ripple">
<i class="mdui-icon mdui-icon-right material-icons">share</i> Share
</button>
<button class="mdui-btn mdui-color-yellow" disabled>
<i class="mdui-icon mdui-icon-right material-icons">share</i>
Share</button
>Harmadik féltől származó ikonkönyvtárak
Harmadik féltől származó ikonkönyvtár használatához először be kell hívni annak CSS fájlját.
Majd adja hozzá az mdui-icon osztályt és az adott ikonkönyvtár osztálynevét az <i> elemhez.
Az alábbi példa az ionicons ikonjait használja.
Példa
<link rel="stylesheet" href="ionicons.css" />
<i class="mdui-icon ion-plus-circled"></i>
<i class="mdui-icon ion-plus-circled mdui-text-color-red"></i>
<i class="mdui-icon ion-plus-circled mdui-text-color-theme"></i>
<button class="mdui-btn mdui-ripple mdui-btn-icon">
<i class="mdui-icon ion-plus-round"></i>
</button>
<button class="mdui-btn mdui-color-theme-accent mdui-ripple">
<i class="mdui-icon mdui-icon-left ion-share"></i> Share
</button>
<button class="mdui-btn mdui-ripple mdui-fab mdui-color-theme-accent">
<i class="mdui-icon ion-plus-round"></i></button
>