Nowy mdui 2 oparty na Material Design 3 i Web Components jest już dostępny, przejdź do dokumentacji mdui 2.

Siatka listy

Listy siatki składają się z powtarzalnego wzoru komórek. Zazwyczaj są używane do wyświetlania galerii zdjęć. Mogą być używane w połączeniu z systemem układu siatki do tworzenia układów.

Sposób użycia

Komponent listy siatki jest zaimplementowany w czystym CSS, więc napisanie kodu HTML wystarczy, aby zaczął działać.

Powiązane artykuły

Wytyczne projektowe Material Design: Komponenty - Listy siatki

Styl

Podstawowy styl

Przykład

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

Tekst paska akcji

Przykład

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

Paski akcji mogą zawierać dwie linie tekstu.

Przykład

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

Przycisk paska akcji

Przykład

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

Dodaj klasę .mdui-grid-tile-actions-top do .mdui-grid-tile-actions, aby umieścić pasek akcji na górze komórki.

Przykład

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

Dodaj klasę .mdui-grid-tile-actions-transparent do .mdui-grid-tile-actions, aby nadać paskowi akcji przezroczyste tło.

Przykład

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

Dodaj klasę .mdui-grid-tile-actions-gradient do .mdui-grid-tile-actions, aby nadać paskowi akcji gradientowe tło.

Przykład

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

Użycie systemu siatki do układu

Dodaj klasę .mdui-grid-list do .mdui-row-* o równych kolumnach, aby dostosować odstępy między komórkami do 4px.

Przykład

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

Lista klas CSS

Nazwa klasy	Opis
`.mdui-grid-tile`	Definiuje kafelek w liście siatki.
`.mdui-grid-tile-actions`	Definiuje pasek akcji w kafelku.
`.mdui-grid-tile-actions-top`	Umieszcza pasek akcji na górze kafelka.
`.mdui-grid-tile-actions-transparent`	Nadaje paskowi akcji przezroczyste tło.
`.mdui-grid-tile-actions-gradient`	Nadaje paskowi akcji gradientowe tło.
`.mdui-grid-tile-text`	Definiuje tekst w pasku akcji kafelka.
`.mdui-grid-tile-title`	Definiuje tytuł w tekście paska akcji kafelka.
`.mdui-grid-tile-subtitle`	Definiuje podtytuł w tekście paska akcji kafelka.
`.mdui-grid-tile-buttons`	Definiuje obszar przycisków w pasku akcji kafelka.
`.mdui-grid-list`	Definiuje listę siatki. Używane w połączeniu z systemem układu siatki.

Kontrolki listy

Zakładka