near_me
Rozpoczęcie
keyboard_arrow_downlayers
Styl
keyboard_arrow_downwidgets
Komponenty
keyboard_arrow_downlocal_mall
Zasoby
keyboard_arrow_downNowy mdui 2 oparty na Material Design 3 i Web Components jest już dostępny, przejdź do dokumentacji mdui 2.
Ikony
mdui ma wbudowane 932 ikony Material Icons. Oprócz nich możesz również używać ikon stron trzecich.
Powiązane artykuły
Przykłady użycia
Wymieniliśmy wszystkie ikony Material Icons, możesz kliknąć ikonę, aby skopiować jej kod.
Przykład
<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>Jeśli ikona jest używana w przycisku płaskim lub pływającym, należy również dodać klasę mdui-icon-left lub mdui-icon-right, aby ikona znajdowała się po lewej lub prawej stronie przycisku.
Przykład
<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
>Biblioteka ikon stron trzecich
Aby korzystać z biblioteki ikon stron trzecich, należy najpierw zaimportować plik CSS tej biblioteki.
Następnie dodaj klasę mdui-icon oraz nazwę klasy odpowiedniej biblioteki ikon do elementu <i>.
Poniższy przykład wykorzystuje ikony z ionicons.
Przykład
<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
>