O novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.

Lista em grade

As listas de grade consistem em uma série de células, geralmente usadas para expor álbuns de fotos. Elas podem ser usadas em conjunto com o sistema de layout de grade para o layout.

Como usar

O componente de lista de grade é escrito em CSS puro, bastando escrever o código HTML para que ele funcione.

Leitura relacionada

Diretrizes de design do Material Design: Componentes - Lista de grade

Estilo

Estilo básico

Exemplo

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

Texto da barra de ações

Exemplo

<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 barra de ações pode conter duas linhas de texto.

Exemplo

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

Botão da barra de ações

Exemplo

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

Estilo da barra de ações

Adicione a classe .mdui-grid-tile-actions-top em .mdui-grid-tile-actions para posicionar a barra de ações no topo da célula.

Exemplo

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

Adicione a classe .mdui-grid-tile-actions-transparent em .mdui-grid-tile-actions para dar à barra de ações um fundo transparente.

Exemplo

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

Adicione a classe .mdui-grid-tile-actions-gradient em .mdui-grid-tile-actions para dar à barra de ações um fundo gradiente.

Exemplo

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

Utilizando o sistema de grade para o layout

Adicione a classe .mdui-grid-list em .mdui-row-* de colunas iguais para ajustar o espaçamento entre as células para 4px.

Exemplo

<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 de classes CSS

Nome da classe	Descrição
`.mdui-grid-tile`	Define um tile (bloco) de uma lista de grade.
`.mdui-grid-tile-actions`	Define a barra de ações dentro do tile.
`.mdui-grid-tile-actions-top`	Posiciona a barra de ações no topo do tile.
`.mdui-grid-tile-actions-transparent`	Dá à barra de ações um fundo transparente.
`.mdui-grid-tile-actions-gradient`	Dá à barra de ações um fundo gradiente.
`.mdui-grid-tile-text`	Define o texto na barra de ações do tile.
`.mdui-grid-tile-title`	Define o título no texto da barra de ações do tile.
`.mdui-grid-tile-subtitle`	Define o subtítulo no texto da barra de ações do tile.
`.mdui-grid-tile-buttons`	Define a área de botões na barra de ações do tile.
`.mdui-grid-list`	Define uma lista de grade. Usado em conjunto com o sistema de layout de grade.

Controles de lista

Aba