Zcela nové mdui 2 založené na Material Design 3 a Web Components bylo vydáno, přejděte na dokumentaci mdui 2.

Mřížkový seznam

Mřížkový seznam je tvořen řadou dlaždic, které se obvykle používají k zobrazení alb. Lze jej kombinovat s systémem rozložení mřížky pro rozložení.

Způsob volání

Komponenta mřížkového seznamu je napsána v čistém CSS a k jejímu fungování stačí napsat HTML kód.

Související čtení

Designové zásady Material Design: Komponenty - Mřížkový seznam

Styl

Základní styl

Příklad

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

Text panelu akcí

Příklad

<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>

Panel akcí může obsahovat dva řádky textu.

Příklad

<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>

Tlačítko panelu akcí

Příklad

<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>

Styl panelu akcí

Přidáním třídy .mdui-grid-tile-actions-top do .mdui-grid-tile-actions lze umístit panel akcí na vrchol dlaždice.

Příklad

<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>

Přidáním třídy .mdui-grid-tile-actions-transparent do .mdui-grid-tile-actions bude mít panel akcí průhledné pozadí.

Příklad

<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>

Přidáním třídy .mdui-grid-tile-actions-gradient do .mdui-grid-tile-actions bude mít panel akcí pozadí s přechodem.

Příklad

<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>

Rozložení pomocí mřížkového systému

Přidáním třídy .mdui-grid-list do .mdui-row-* se vzdálenost mezi dlaždicemi změní na 4px.

Příklad

<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>

Seznam CSS tříd

Název třídy	Popis
`.mdui-grid-tile`	Definuje dlaždici mřížkového seznamu.
`.mdui-grid-tile-actions`	Definuje panel akcí v dlaždici.
`.mdui-grid-tile-actions-top`	Umístí panel akcí na vrchol dlaždice.
`.mdui-grid-tile-actions-transparent`	Zprůhlední pozadí panelu akcí.
`.mdui-grid-tile-actions-gradient`	Přidá pozadí s přechodem do panelu akcí.
`.mdui-grid-tile-text`	Definuje text v panelu akcí dlaždice.
`.mdui-grid-tile-title`	Definuje nadpis v textu panelu akcí dlaždice.
`.mdui-grid-tile-subtitle`	Definuje podnadpis v textu panelu akcí dlaždice.
`.mdui-grid-tile-buttons`	Definuje oblast s tlačítky v panelu akcí dlaždice.
`.mdui-grid-list`	Definuje mřížkový seznam. Používá se s mřížkovým systémem rozložení.

Ovládací prvky seznamu

Záložka