El nuevo mdui 2 basado en Material Design 3 y Web Components ya está disponible. Consulta la documentación de mdui 2 ahora.

Lista de cuadrícula

La lista de cuadrícula está formada por una serie de celdas, y suele utilizarse para mostrar álbumes. Puede combinarse con el sistema de diseño de cuadrícula para la distribución.

Modo de uso

El componente de lista de cuadrícula está escrito solo con CSS; basta con escribir el código HTML para que funcione.

Lectura relacionada

Pautas de diseño de Material Design: componentes - Grid List

Estilo

Estilo básico

Ejemplo

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

Texto de la barra de acciones

Ejemplo

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

La barra de acciones puede contener dos líneas de texto.

Ejemplo

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

Botones de la barra de acciones

Ejemplo

<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 de la barra de acciones

Añadir la clase .mdui-grid-tile-actions-top a .mdui-grid-tile-actions para colocar la barra de acciones en la parte superior de la celda.

Ejemplo

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

Añadir la clase .mdui-grid-tile-actions-transparent a .mdui-grid-tile-actions para que la barra de acciones tenga un fondo transparente.

Ejemplo

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

Añadir la clase .mdui-grid-tile-actions-gradient a .mdui-grid-tile-actions para que la barra de acciones tenga un fondo degradado.

Ejemplo

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

Utilizar el sistema de cuadrícula para el diseño

Añadir la clase .mdui-grid-list a las filas .mdui-row-* de columnas iguales para ajustar el espacio entre celdas a 4 px.

Ejemplo

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

Nombre de clase	Descripción
`.mdui-grid-tile`	Definir un mosaico de lista de cuadrícula.
`.mdui-grid-tile-actions`	Definir la barra de acciones del mosaico.
`.mdui-grid-tile-actions-top`	Colocar la barra de acciones en la parte superior del mosaico.
`.mdui-grid-tile-actions-transparent`	Hacer que la barra de acciones tenga un fondo transparente.
`.mdui-grid-tile-actions-gradient`	Hacer que la barra de acciones tenga un fondo degradado.
`.mdui-grid-tile-text`	Definir el texto de la barra de acciones del mosaico.
`.mdui-grid-tile-title`	Definir el título del texto de la barra de acciones del mosaico.
`.mdui-grid-tile-subtitle`	Definir el subtítulo del texto de la barra de acciones del mosaico.
`.mdui-grid-tile-buttons`	Definir el área de botones de la barra de acciones del mosaico.
`.mdui-grid-list`	Definir una lista de cuadrícula. Se utiliza junto con el sistema de diseño de cuadrícula.

Control de lista

Tabs