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

Rácsos elrendezés

Az mdui reszponzív, mobilközpontú 12 oszlopos rácsos elrendezési rendszert kínál.

Kapcsolódó olvasmányok

Material Design tervezési irányelvek: Elrendezés – Reszponzív UI

Elrendezési konténer

Az mdui elrendezési rendszerének használatához a tartalmat egy .mdui-container konténerbe kell foglalni. Erre a célra két osztály áll rendelkezésre.

A .mdui-container osztály a képernyő szélességének 92–96%-át foglalja el, maximális szélessége pedig 1280 képpont.

<body>
  <div class="mdui-container">
    ...
  </div>
</body>

A .mdui-container-fluid osztály mindig a képernyő teljes (100%-os) szélességét foglalja el.

<body>
  <div class="mdui-container-fluid">
    ...
  </div>
</body>

Alap rács

Az .mdui-row osztálynak a .mdui-container vagy .mdui-container-fluid elemen belül kell elhelyezkednie a megfelelő igazítás és belső margó (padding) biztosítása érdekében.

Az .mdui-row elemen belül több .mdui-col-xs-[1-12] osztályú elem helyezhető el, ahol a .mdui-col-xs-[1-12] osztályban szereplő szám jelzi, hogy az adott elem hány oszlopot foglal el.

Ha egy sorban az oszlopok száma meghaladja a 12-t, a felesleges oszlopok új sorba kerülnek.

Példa

<div class="mdui-row">
  <div class="mdui-col-xs-3">.mdui-col-xs-3</div>
</div>
<div class="mdui-row">
  <div class="mdui-col-xs-6">.mdui-col-xs-6</div>
</div>
<div class="mdui-row">
  <div class="mdui-col-xs-9">.mdui-col-xs-9</div>
</div>
<div class="mdui-row">
  <div class="mdui-col-xs-12">.mdui-col-xs-12</div>
</div>

Reszponzív rács

.mdui-col-xs-[1-12] Minden eszközön érvényes, beleértve a mobilokat és a számítógépeket is.
.mdui-col-sm-[1-12] Kis és annál nagyobb méretű képernyőkön érvényes, például táblagépeken.
.mdui-col-md-[1-12] Közepes és annál nagyobb méretű képernyőkön érvényes, például laptopokon.
.mdui-col-lg-[1-12] Nagy és annál nagyobb méretű képernyőkön érvényes, például asztali gépeken.
.mdui-col-xl-[1-12] Extra nagy képernyőkön érvényes, például televíziókon.

Ezen osztályok kombinálásával érhető el a reszponzív hatás.

A reszponzív breakpointok a következők:

class	Tartomány	Csatornaszélesség
`.mdui-col-xs-[1-12]`	> 0px	16px (minden oszlop bal és jobb oldalán 8px)
`.mdui-col-sm-[1-12]`	> 600px
`.mdui-col-md-[1-12]`	> 1024px
`.mdui-col-lg-[1-12]`	> 1440px
`.mdui-col-xl-[1-12]`	> 1920px

Példa

<!-- Extra kis képernyőkön az első oszlop 100%, a második 50% széles. Kis és annál nagyobb képernyőkön az első oszlop 66,6%, a második 33,3% széles. -->
<div class="mdui-row">
  <div class="mdui-col-xs-12 mdui-col-sm-8">.mdui-col-xs-12<br/>.mdui-col-sm-8</div>
  <div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
</div>

<!-- Extra kis képernyőkön minden oszlop 50% széles, kis és annál nagyobb képernyőkön minden oszlop 33,3% széles. -->
<div class="mdui-row">
  <div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
  <div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
  <div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
</div>

<!-- Minden eszközön minden oszlop 50% széles. -->
<div class="mdui-row">
  <div class="mdui-col-xs-6">.mdui-col-xs-6</div>
  <div class="mdui-col-xs-6">.mdui-col-xs-6</div>
</div>

Oszlopköz

Alapértelmezés szerint 16 képpontos köz van az oszlopok között; a .mdui-row osztályhoz adott .mdui-row-gapless osztály megszünteti ezt a közt.

Példa

<div class="mdui-row mdui-row-gapless">
  <div class="mdui-col-xs-4">mdui-col-xs-4</div>
  <div class="mdui-col-xs-4">mdui-col-xs-4</div>
  <div class="mdui-col-xs-4">mdui-col-xs-4</div>
</div>

Oszlopeltolás

Az .mdui-col-offset-xs-[1-12], .mdui-col-offset-sm-[1-12], .mdui-col-offset-md-[1-12], .mdui-col-offset-lg-[1-12] és .mdui-col-offset-xl-[1-12] osztályokkal az oszlopok jobbra tolhatók. A szám jelzi az eltolás mértékét oszlopokban kifejezve.

Példa

<div class="mdui-row">
  <div class="mdui-col-md-4">.mdui-col-md-4</div>
  <div class="mdui-col-md-4 mdui-col-offset-md-4">.mdui-col-md-4 .mdui-col-offset-md-4</div>
</div>
<div class="mdui-row">
  <div class="mdui-col-md-3 mdui-col-offset-md-3">.mdui-col-md-3<br/>.mdui-col-offset-md-3</div>
  <div class="mdui-col-md-3 mdui-col-offset-md-3">.mdui-col-md-3<br/>.mdui-col-offset-md-3</div>
</div>
<div class="mdui-row">
  <div class="mdui-col-md-6 mdui-col-offset-md-3">.mdui-col-md-6<br/>.mdui-col-offset-md-3</div>
</div>

Beágyazott oszlopok

Oszlopok beágyazása újabb .mdui-row és .mdui-col-[*] elemek hozzáadásával érhető el a már meglévő oszlopokon belül. A beágyazott sor oszlopainak összege nem haladhatja meg a 12-t.

Példa

<div class="mdui-row">
  <div class="mdui-col-xs-9">
    Level 1: .col-xs-9
    <div class="mdui-row">
      <div class="mdui-col-xs-8 mdui-col-sm-6">Level 2: .col-xs-8 .col-sm-6</div>
      <div class="mdui-col-xs-4 mdui-col-sm-6">Level 2: .col-xs-4 .col-sm-6</div>
    </div>
  </div>
</div>

Egyenlő elosztású oszlopok

Az .mdui-row-xs-[1-12] osztályon belül elhelyezett .mdui-col elemek egyenlő arányban oszlanak el. Például az .mdui-row-xs-5 osztályban minden .mdui-col elem 20%-os szélességet kap.

Példa

<div class="mdui-row-xs-5">
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
  <div class="mdui-col">5</div>
</div>

Az .mdui-row-xs-[1-12], .mdui-row-sm-[1-12], .mdui-row-md-[1-12], .mdui-row-lg-[1-12] és .mdui-row-xl-[1-12] osztályok kombinálásával reszponzív elrendezés valósítható meg.

CSS osztályok listája

Osztálynév	Leírás
`.mdui-container`	Korlátozott szélességű elrendezési konténer
`.mdui-container-fluid`	100% szélességű elrendezési konténer
`.mdui-row`	Sor meghatározása
`.mdui-col-[xs\|sm\|md\|lg\|xl]-[1-12]`	Oszlop meghatározása
`.mdui-row-gapless`	Oszlopköz megszüntetése
`.mdui-col-offset-[xs\|sm\|md\|lg\|xl]-[1-12]`	Oszlopeltolás
`.mdui-row-[xs\|sm\|md\|lg\|xl]-[1-12]`	Egyenlő elosztású oszlopok

Roboto betűtípus

Tipográfia