near_me
Démarrage
keyboard_arrow_downlayers
Style
keyboard_arrow_downwidgets
Composants
keyboard_arrow_downlocal_mall
Ressources
keyboard_arrow_downmdui 2 est arrivé, basé sur Material Design 3 et les Web Components. Consultez la documentation de mdui 2 ici.
Icônes
mdui intègre 932 icônes de Material Icons ; en plus de celles-ci, vous pouvez également utiliser des icônes tierces.
Lecture associée
Exemples d'utilisation
Nous avons listé toutes les icônes de Material Icons, et vous pouvez cliquer directement sur une icône pour copier son code.
Exemple
<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>Si l'icône est utilisée dans un bouton plat ou un Floating Action Button, il faut également ajouter les classes mdui-icon-left ou mdui-icon-right pour placer l'icône à gauche ou à droite du bouton.
Exemple
<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
>Bibliothèques d'icônes tierces
Pour utiliser une bibliothèque d'icônes tierce, il faut d'abord inclure le fichier CSS de cette bibliothèque.
Ensuite, ajoutez la classe mdui-icon ainsi que le nom de la classe correspondant à la bibliothèque, à l'élément <i>.
L'exemple ci-dessous utilise les icônes d'ionicons.
Exemple
<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
>