menuMDUIDocs
color_lens
A Material Design 3 és Web Components alapú új mdui 2 már elérhető, tekintse meg az mdui 2 dokumentációját.

Segédosztályok

Margó

Ezekkel a segédosztályokkal margin és padding adható az elemekhez, az alapértelmezett értékek a 8px többszörösei.

Az osztálynév formátuma: .mdui-{tulajdonság}-{irány}-{méret}

Tulajdonság:

  • m - margin beállítása
  • p - padding beállítása

Irány:

  • t - margin-top vagy padding-top beállítása
  • b - margin-bottom vagy padding-bottom beállítása
  • l - margin-left vagy padding-left beállítása
  • r - margin-right vagy padding-right beállítása
  • x - margin-left és margin-right vagy padding-left és padding-right beállítása
  • y - margin-top és margin-bottom vagy padding-top és padding-bottom beállítása
  • a - minden irányú margin vagy padding beállítása

Méret:

  • 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;
}

Gyors lebegtetés

  • A .mdui-float-left balra lebegteti az elemet.
  • A .mdui-float-right jobbra lebegteti az elemet.
code
Példa
<div class="mdui-float-left">float left</div>
<div class="mdui-float-right">float right</div>

Vízszintes középre igazítás

Bármely elemhez hozzáadva az .mdui-center osztályt, az vízszintesen középre kerül.

code
Példa
<div class="mdui-center" style="width: 200px">mdui-center</div>

Függőleges középre igazítás

Az .mdui-valign osztály hozzáadásával az elemben lévő gyermekelemek függőlegesen középre kerülnek.

code
Példa
<div class="mdui-valign">
  <p class="mdui-center">This should be vertically aligned</p>
</div>

Vízszintes igazítási módok

  • .mdui-text-left Balra igazítja a szöveget.
  • .mdui-text-center Középre igazítja a szöveget.
  • .mdui-text-right Jobbra igazítja a szöveget.
code
Példa
<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>

Szöveg kis- és nagybetűs konverziója

  • .mdui-text-lowercase A szöveget kisbetűssé alakítja.
  • .mdui-text-uppercase A szöveget nagybetűssé alakítja.
  • .mdui-text-capitalize A szöveg minden szavának kezdőbetűjét nagybetűssé alakítja.
code
Példa
<p class="mdui-text-lowercase">Lowercased text.</p>
<p class="mdui-text-uppercase">Uppercased text.</p>
<p class="mdui-text-capitalize">Capitalized text.</p>

Automatikus szövegvágás

.mdui-text-truncate Automatikusan levágja a szöveget, ha az túl hosszú, és három ponttal helyettesíti a végét.

code
Példa
<p class="mdui-text-truncate" style="max-width: 200px;">Ez egy nagyon-nagyon-nagyon-nagyon-nagyon-nagyon-nagyon-nagyon-nagyon hosszú szöveg.</p>

Lebegtetés törlése

A lebegtetés törléséhez adja a .mdui-clearfix osztályt a szülőelemhez.

code
Példa
<div class="mdui-clearfix">
  <div class="mdui-float-left">mdui-float-left</div>
  <div class="mdui-float-right">mdui-float-right</div>
</div>

Tartalom elrejtése

  • Az .mdui-hidden osztály elrejti az elemet (display: none;), az elrejtett elem nem foglal helyet az oldalon.
  • Az .mdui-invisible osztály láthatatlanná teszi az elemet, de az továbbra is elfoglalja a helyét az oldalon (visibility: hidden;).

Reszponzív eszközök

Ezek a segédosztályok média lekérdezések (media queries) segítségével rejtik el a tartalmat a különböző eszközökön. Ide tartoznak:

  • .mdui-hidden-*: Elrejtés a megadott szélességű eszközön.
  • .mdui-hidden-*-up: Elrejtés a megadott szélességű és annál nagyobb eszközökön.
  • .mdui-hidden-*-down: Elrejtés a megadott szélességű és annál kisebb eszközökön.
Extra kicsi képernyő
<600px		Kis képernyő
>=600px - <1024px		Közepes képernyő
>=1024px - <1440px		Nagy képernyő
>=1440px - <1920px		Extra nagy képernyő
>=1920px
.mdui-hidden-xsLáthatóLáthatóLáthatóLátható
.mdui-hidden-smLáthatóLáthatóLáthatóLátható
.mdui-hidden-mdLáthatóLáthatóLáthatóLátható
.mdui-hidden-lgLáthatóLáthatóLáthatóLátható
.mdui-hidden-xlLáthatóLáthatóLáthatóLátható
.mdui-hidden-xs-downLáthatóLáthatóLáthatóLátható
.mdui-hidden-sm-downLáthatóLáthatóLátható
.mdui-hidden-md-downLáthatóLátható
.mdui-hidden-lg-downLátható
.mdui-hidden-xl-down
.mdui-hidden-xs-up
.mdui-hidden-sm-upLátható
.mdui-hidden-md-upLáthatóLátható
.mdui-hidden-lg-upLáthatóLáthatóLátható
.mdui-hidden-xl-upLáthatóLáthatóLáthatóLátható

Méretezze át a böngészőablakot, vagy nézze meg az alábbi példákat különböző eszközökön. A sötét részek jelzik, hogy az adott elem látható az aktuális ablakban.

✔ .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
Média
arrow_forwardNext
Árnyék