È disponibile il nuovo mdui 2 basato su Material Design 3 e Web Components, vai alla documentazione di mdui 2.

Grid List

Una Grid list è composta da una serie di celle, solitamente utilizzate per visualizzare album fotografici. Può essere utilizzata in combinazione con il sistema di layout a griglia per il posizionamento.

Modalità d'uso

Il componente Grid list è scritto in puro CSS, basta scrivere il codice HTML per renderlo efficace.

Letture correlate

Specifiche Material Design: Componenti - Grid list

Stile

Stile di base

Esempio

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

Testo della barra delle azioni

Esempio

<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 delle azioni può contenere due righe di testo.

Esempio

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

Button della barra delle azioni

Esempio

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

Stile della barra delle azioni

Aggiungendo la classe .mdui-grid-tile-actions-top su .mdui-grid-tile-actions, la barra delle azioni può essere posizionata nella parte superiore della cella.

Esempio

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

Aggiungendo la classe .mdui-grid-tile-actions-transparent su .mdui-grid-tile-actions, la barra delle azioni può avere uno sfondo trasparente.

Esempio

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

Aggiungendo la classe .mdui-grid-tile-actions-gradient su .mdui-grid-tile-actions, la barra delle azioni può avere uno sfondo sfumato.

Esempio

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

Utilizzo del sistema a griglia per il layout

Aggiungendo la classe .mdui-grid-list su .mdui-row-* con colonne uguali, la spaziatura tra le celle può essere regolata a 4px.

Esempio

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

Elenco classi CSS

Nome classe	Descrizione
`.mdui-grid-tile`	Definisce una tile della Grid list.
`.mdui-grid-tile-actions`	Definisce la barra delle azioni nella tile.
`.mdui-grid-tile-actions-top`	Posiziona la barra delle azioni nella parte superiore della tile.
`.mdui-grid-tile-actions-transparent`	Dona alla barra delle azioni uno sfondo trasparente.
`.mdui-grid-tile-actions-gradient`	Dona alla barra delle azioni uno sfondo sfumato.
`.mdui-grid-tile-text`	Definisce il testo nella barra delle azioni della tile.
`.mdui-grid-tile-title`	Definisce il titolo nel testo della barra delle azioni della tile.
`.mdui-grid-tile-subtitle`	Definisce il sottotitolo nel testo della barra delle azioni della tile.
`.mdui-grid-tile-buttons`	Definisce l'area dei Button nella barra delle azioni della tile.
`.mdui-grid-list`	Definisce una Grid list. Utilizzato in combinazione con il sistema di layout a griglia.

Controlli di lista

Tab