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.

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.

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évLeírás
.mdui-grid-tileEgy rácslista csempéjének (tile) meghatározása.
.mdui-grid-tile-actionsA csempén belüli műveleti sáv meghatározása.
.mdui-grid-tile-actions-topA műveleti sáv a csempe tetejére kerül.
.mdui-grid-tile-actions-transparentAz átlátszó háttér biztosítása a műveleti sáv számára.
.mdui-grid-tile-actions-gradientA színátmenetes háttér biztosítása a műveleti sáv számára.
.mdui-grid-tile-textA csempe műveleti sávjában lévő szöveg meghatározása.
.mdui-grid-tile-titleA csempe műveleti sávjában lévő szöveg címének meghatározása.
.mdui-grid-tile-subtitleA csempe műveleti sávjában lévő szöveg alcímének meghatározása.
.mdui-grid-tile-buttonsA csempe műveleti sávjában lévő gombterület meghatározása.
.mdui-grid-listA rácslista meghatározása. A rács elrendezési rendszerrel együtt használandó.