menuMDUIDocs
color_lens
Новый mdui 2 на базе Material Design 3 и Web Components уже здесь. Перейти к документации mdui 2.

Сетка-список

Сетка-список состоит из набора ячеек и обычно используется для отображения фотоальбомов. Её можно использовать для макета вместе с сеточной системой.

Использование

Компонент сетка-список написан на чистом CSS, для его работы достаточно просто использовать HTML-код.

Стиль

Базовый стиль

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

Текст панели действий

Пример
<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>

Панель действий может содержать две строки текста.

Пример
<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>

Кнопка панели действий

Пример
<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>

Стиль панели действий

Добавление класса .mdui-grid-tile-actions-top к .mdui-grid-tile-actions позволяет расположить панель действий в верхней части ячейки.

Пример
<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>

Добавление класса .mdui-grid-tile-actions-transparent к .mdui-grid-tile-actions делает фон панели действий прозрачным.

Пример
<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>

Добавление класса .mdui-grid-tile-actions-gradient к .mdui-grid-tile-actions делает фон панели действий градиентным.

Пример
<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>

Использование сеточной системы для макета

Добавление класса .mdui-grid-list к .mdui-row-* в равноширинных колонках позволяет установить расстояние между ячейками в 4px.

Пример
<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-классов

Имя классаОписание
.mdui-grid-tileОпределяет плитку в сетке-списке.
.mdui-grid-tile-actionsОпределяет панель действий в плитке.
.mdui-grid-tile-actions-topРасполагает панель действий в верхней части плитки.
.mdui-grid-tile-actions-transparentДелает фон панели действий прозрачным.
.mdui-grid-tile-actions-gradientДелает фон панели действий градиентным.
.mdui-grid-tile-textОпределяет текст в панели действий плитки.
.mdui-grid-tile-titleОпределяет заголовок в тексте панели действий плитки.
.mdui-grid-tile-subtitleОпределяет подзаголовок в тексте панели действий плитки.
.mdui-grid-tile-buttonsОпределяет область кнопок в панели действий плитки.
.mdui-grid-listОпределяет сетку-список. Используется совместно с сеточной системой.