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

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

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

Компонент сетка-список написан на чистом 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`	Определяет сетку-список. Используется совместно с сеточной системой.

Элементы управления списка

Вкладки