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 lista

A rácslista cellák sorozatából áll, általában fotóalbumok megjelenítésére használják. A rács elrendezési rendszerrel együtt használható az elrendezéshez.

Használat

A rácslista komponens tiszta CSS-szel készült, csak HTML kódot kell írni az érvénybe léptetéshez.

Kapcsolódó olvasmányok

Material Design tervezési irányelvek: Komponensek – Rácslista

Stílus

Alapstílus

Példa

<div class="mdui-grid-tile">
  <a href="javascript:;"><img src="card.jpg"/></a>
</div>

Műveleti sáv szövege

Példa

<div class="mdui-grid-tile">
  <a href="javascript:;"><img src="card.jpg"/></a>
  <div class="mdui-grid-tile-actions">
    <div class="mdui-grid-tile-text">
      <div class="mdui-grid-tile-title">Halcyon Days</div>
    </div>
  </div>
</div>

A műveleti sáv két sor szöveget tartalmazhat.

Példa

<div class="mdui-grid-tile">
  <a href="javascript:;"><img src="card.jpg"/></a>
  <div class="mdui-grid-tile-actions">
    <div class="mdui-grid-tile-text">
      <div class="mdui-grid-tile-title">Halcyon Days</div>
      <div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>Ellie Goulding</div>
    </div>
  </div>
</div>

Műveleti sáv gombjai

Példa

<div class="mdui-grid-tile">
  <img src="card.jpg"/>
  <div class="mdui-grid-tile-actions">
    <div class="mdui-grid-tile-text">
      <div class="mdui-grid-tile-title">Halcyon Days</div>
      <div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>Ellie Goulding</div>
    </div>
    <div class="mdui-grid-tile-buttons">
      <button class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">star_border</i></button>
    </div>
  </div>
</div>

Műveleti sáv stílusa

A .mdui-grid-tile-actions-top osztály hozzáadása a .mdui-grid-tile-actions elemhez a műveleti sávot a cella tetejére helyezi.

Példa

<div class="mdui-grid-tile">
  <img src="card.jpg"/>
  <div class="mdui-grid-tile-actions mdui-grid-tile-actions-top">
    <div class="mdui-grid-tile-text">
      <div class="mdui-grid-tile-title">Halcyon Days</div>
    </div>
  </div>
</div>

A .mdui-grid-tile-actions-transparent osztály hozzáadása a .mdui-grid-tile-actions elemhez átlátszó hátteret ad a műveleti sávnak.

Példa

<div class="mdui-grid-tile">
  <img src="card.jpg"/>
  <div class="mdui-grid-tile-actions mdui-grid-tile-actions-transparent">
    <div class="mdui-grid-tile-text">
      <div class="mdui-grid-tile-title">Halcyon Days</div>
    </div>
  </div>
</div>

A .mdui-grid-tile-actions-gradient osztály hozzáadása a .mdui-grid-tile-actions elemhez átmenetes hátteret ad a műveleti sávnak.

Példa

<div class="mdui-grid-tile">
  <img src="card.jpg"/>
  <div class="mdui-grid-tile-actions mdui-grid-tile-actions-gradient">
    <div class="mdui-grid-tile-text">
      <div class="mdui-grid-tile-title">Halcyon Days</div>
    </div>
  </div>
</div>

Elrendezés használata a rácsrendszerrel

A .mdui-grid-list osztály hozzáadása az egyenlő oszlopos .mdui-row-* elemhez 4px-re állítja a cellák közötti távolságot.

Példa

<div class="mdui-row-xs-3 mdui-row-sm-4 mdui-row-md-5 mdui-row-lg-6 mdui-row-xl-7 mdui-grid-list">
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
</div>

CSS osztályok listája

Osztálynév	Leírás
`.mdui-grid-tile`	Egy rácslista csempéjének (tile) meghatározása.
`.mdui-grid-tile-actions`	A csempén belüli műveleti sáv meghatározása.
`.mdui-grid-tile-actions-top`	A műveleti sáv a csempe tetejére kerül.
`.mdui-grid-tile-actions-transparent`	Az átlátszó háttér biztosítása a műveleti sáv számára.
`.mdui-grid-tile-actions-gradient`	A színátmenetes háttér biztosítása a műveleti sáv számára.
`.mdui-grid-tile-text`	A csempe műveleti sávjában lévő szöveg meghatározása.
`.mdui-grid-tile-title`	A csempe műveleti sávjában lévő szöveg címének meghatározása.
`.mdui-grid-tile-subtitle`	A csempe műveleti sávjában lévő szöveg alcímének meghatározása.
`.mdui-grid-tile-buttons`	A csempe műveleti sávjában lévő gombterület meghatározása.
`.mdui-grid-list`	A rácslista meghatározása. A rács elrendezési rendszerrel együtt használandó.

Lista vezérlők

Fül