menuMDUIDocs
color_lens
Material Design 3 ve Web Components tabanlı yeni mdui 2 yayınlandı, mdui 2 dokümantasyonuna gidin.

Yardımcı Sınıflar

Boşluklar

Bu yardımcı sınıf serisi, öğelere margin ve padding ekleyebilir; varsayılan değerler 8 pikselin katlarıdır.

Sınıf adı formatı: .mdui-{öznitelik}-{yön}-{boyut}

Öznitelik:

  • m - margin ayarlar
  • p - padding ayarlar

Yön:

  • t - margin-top veya padding-top ayarlar
  • b - margin-bottom veya padding-bottom ayarlar
  • l - margin-left veya padding-left ayarlar
  • r - margin-right veya padding-right ayarlar
  • x - margin-left margin-right veya padding-left padding-right ayarlar
  • y - margin-top margin-bottom veya padding-top padding-bottom ayarlar
  • a - margin veya padding ayarlar

Boyut:

  • 0 - 0px
  • 1 - 8px
  • 2 - 16px
  • 3 - 24px
  • 4 - 32px
  • 5 - 40px
.mdui-m-t-0 {
  margin-top: 0 !important;
}

.mdui-m-l-1 {
  margin-left: 8px !important;
}

.mdui-p-x-2 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.mdui-p-a-5 {
  padding: 40px !important;
}

Hızlı Kaydırma

  • .mdui-float-left öğeyi sola kaydırır
  • .mdui-float-right öğeyi sağa kaydırır
code
Örnek
<div class="mdui-float-left">float left</div>
<div class="mdui-float-right">float right</div>

Yatay ortalama

Herhangi bir öğeye .mdui-center sınıfı eklenerek yatay olarak ortalanabilir.

code
Örnek
<div class="mdui-center" style="width: 200px">mdui-center</div>

Dikey ortalama

Herhangi bir öğeye .mdui-valign sınıfı eklenerek içindeki alt öğelerin dikey olarak ortalanması sağlanabilir.

code
Örnek
<div class="mdui-valign">
  <p class="mdui-center">This should be vertically aligned</p>
</div>

Yatay hizalama

  • .mdui-text-left Metni sola hizalar.
  • .mdui-text-center Metni ortalar.
  • .mdui-text-right Metni sağa hizalar.
code
Örnek
<div class="mdui-text-left">This should be left aligned</div>
<div class="mdui-text-center">This should be center aligned</div>
<div class="mdui-text-right">This should be right aligned</div>

Metin büyük/küçük harf dönüştürme

  • .mdui-text-lowercase Metni küçük harfe dönüştürür.
  • .mdui-text-uppercase Metni büyük harfe dönüştürür.
  • .mdui-text-capitalize Metindeki her kelimenin ilk harfini büyütür.
code
Örnek
<p class="mdui-text-lowercase">Lowercased text.</p>
<p class="mdui-text-uppercase">Uppercased text.</p>
<p class="mdui-text-capitalize">Capitalized text.</p>

Metin otomatik kısaltma

.mdui-text-truncate Metin uzunluğu sınırı aştığında, metni otomatik olarak kısaltabilir ve yerine üç nokta koyabilir.

code
Örnek
<p class="mdui-text-truncate" style="max-width: 200px;">Bu çok çok çok çok çok çok çok çok çok çok çok çok uzun bir metindir.</p>

Kaydırmayı temizleme (Clearfix)

Üst öğeye .mdui-clearfix sınıfı eklenerek kaydırma temizlenebilir.

code
Örnek
<div class="mdui-clearfix">
  <div class="mdui-float-left">mdui-float-left</div>
  <div class="mdui-float-right">mdui-float-right</div>
</div>

İçeriği gizleme

  • .mdui-hidden sınıfı öğeyi gizlemek için kullanılır, display: none; eklemeye eşdeğerdir; gizlenen öğe sayfada yer kaplamaz.
  • .mdui-invisible sınıfı öğeyi görünmez yapmak için kullanılır ancak öğe sayfada yer kaplamaya devam eder, visibility: hidden; eklemeye eşdeğerdir.

Duyarlı araçlar

Bu yardımcı sınıflar, farklı cihazlar için içeriği gizlemek amacıyla medya sorgularını (media queries) kullanır. Bu sınıflar şunları içerir:

  • .mdui-hidden-*: Belirli genişlikteki cihazlarda gizle.
  • .mdui-hidden-*-up: Belirli genişlik ve üzerindeki cihazlarda gizle.
  • .mdui-hidden-*-down: Belirli genişlik ve altındaki cihazlarda gizle.
Çok küçük ekran
<600px		Küçük ekran
>=600px - <1024px		Orta ekran
>=1024px - <1440px		Büyük ekran
>=1440px - <1920px		Çok büyük ekran
>=1920px
.mdui-hidden-xsGörünürGörünürGörünürGörünür
.mdui-hidden-smGörünürGörünürGörünürGörünür
.mdui-hidden-mdGörünürGörünürGörünürGörünür
.mdui-hidden-lgGörünürGörünürGörünürGörünür
.mdui-hidden-xlGörünürGörünürGörünürGörünür
.mdui-hidden-xs-downGörünürGörünürGörünürGörünür
.mdui-hidden-sm-downGörünürGörünürGörünür
.mdui-hidden-md-downGörünürGörünür
.mdui-hidden-lg-downGörünür
.mdui-hidden-xl-down
.mdui-hidden-xs-up
.mdui-hidden-sm-upGörünür
.mdui-hidden-md-upGörünürGörünür
.mdui-hidden-lg-upGörünürGörünürGörünür
.mdui-hidden-xl-upGörünürGörünürGörünürGörünür

Tarayıcı penceresini yeniden boyutlandırın veya aşağıdaki örneği farklı cihazlarda görüntüleyin. Koyu renkli kısımlar mevcut tarayıcı penceresinde görünür olduklarını belirtir.

✔ .mdui-hidden-xs
✔ .mdui-hidden-sm
✔ .mdui-hidden-md
✔ .mdui-hidden-lg
✔ .mdui-hidden-xl
✔ .mdui-hidden-xs-down
✔ .mdui-hidden-sm-down
✔ .mdui-hidden-md-down
✔ .mdui-hidden-lg-down
✔ .mdui-hidden-xl-down
✔ .mdui-hidden-xs-up
✔ .mdui-hidden-sm-up
✔ .mdui-hidden-md-up
✔ .mdui-hidden-lg-up
✔ .mdui-hidden-xl-up
arrow_backPrevious
Medya
arrow_forwardNext
Gölge