near_me
Başlarken
keyboard_arrow_downlayers
Stil
keyboard_arrow_downwidgets
Bileşenler
keyboard_arrow_downlocal_mall
Kaynaklar
keyboard_arrow_downMaterial Design 3 ve Web Components tabanlı yeni mdui 2 yayınlandı, mdui 2 dokümantasyonuna gidin.
Simgeler
mdui özellikleri bünyesinde 932 adet Material Icons simgesi barındırır; bu simgelerin yanı sıra üçüncü taraf simge kütüphanelerini de kullanabilirsiniz.
İlgili Okumalar
Kullanım örneği
Tüm Material Icons simgelerini listeledik; simge kodunu kopyalamak için doğrudan simgenin üzerine tıklayabilirsiniz.
Örnek
<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>Simge düz bir buton veya yüzen bir buton için kullanılıyorsa, simgenin butonun solunda veya sağında yer almasını sağlamak için mdui-icon-left veya mdui-icon-right sınıfı da eklenmelidir.
Örnek
<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
>Üçüncü taraf simge kütüphaneleri
Üçüncü taraf simge kütüphanelerini kullanmak için önce ilgili kütüphanenin CSS dosyasını içe aktarmanız gerekir.
Ardından <i> öğesine mdui-icon sınıfını ve ilgili simge kütüphanesinin sınıf adını ekleyin.
Aşağıdaki örnekte ionicons simgeleri kullanılmaktadır.
Örnek
<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
>