mdui 2 est arrivé, basé sur Material Design 3 et les Web Components. Consultez la documentation de mdui 2 ici.

Liste en grille

Les listes en grille sont composées d'une série de cellules, généralement utilisées pour afficher des galeries. Elles peuvent être associées au système de grille pour la mise en page.

Utilisation

Le composant de liste en grille est écrit en CSS pur et fonctionne simplement en écrivant du code HTML.

Lecture associée

Spécifications Material Design : Composant - Liste en grille

Style

Style de base

Exemple

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

Texte de la barre d'actions

Exemple

<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 barre d'actions peut contenir deux lignes de texte.

Exemple

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

Boutons de la barre d'actions

Exemple

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

Style de la barre d'actions

Ajoutez la classe .mdui-grid-tile-actions-top à .mdui-grid-tile-actions pour placer la barre d'actions en haut de la cellule.

Exemple

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

Ajoutez la classe .mdui-grid-tile-actions-transparent à .mdui-grid-tile-actions pour donner à la barre d'actions un fond transparent.

Exemple

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

Ajoutez la classe .mdui-grid-tile-actions-gradient à .mdui-grid-tile-actions pour donner à la barre d'actions un fond dégradé.

Exemple

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

Utiliser le système de grille pour la mise en page

Ajoutez la classe .mdui-grid-list aux colonnes égales .mdui-row-* pour ajuster l'espacement entre les cellules à 4px.

Exemple

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

Classes CSS

Nom de classe	Description
`.mdui-grid-tile`	Définir une tuile de liste en grille.
`.mdui-grid-tile-actions`	Définir la barre d'actions de la tuile.
`.mdui-grid-tile-actions-top`	Placer la barre d'actions en haut de la tuile.
`.mdui-grid-tile-actions-transparent`	Donner à la barre d'actions un fond transparent.
`.mdui-grid-tile-actions-gradient`	Donner à la barre d'actions un fond dégradé.
`.mdui-grid-tile-text`	Définir le texte de la barre d'actions de la tuile.
`.mdui-grid-tile-title`	Définir le titre du texte de la barre d'actions de la tuile.
`.mdui-grid-tile-subtitle`	Définir le sous-titre du texte de la barre d'actions de la tuile.
`.mdui-grid-tile-buttons`	Définir la zone des boutons de la barre d'actions de la tuile.
`.mdui-grid-list`	Définir une liste en grille. À utiliser avec le système de mise en page en grille.

Commandes de liste

Onglet