menuMDUIDocs
color_lens
Das neue mdui 2 auf Basis von Material Design 3 und Web Components ist da. Zur mdui 2 Dokumentation wechseln.

Grid List

Grid-Listen bestehen aus einer Reihe von Zellen und werden üblicherweise zur Anzeige von Fotoalben verwendet. Sie können in Kombination mit dem Grid-Layout-System für das Layout verwendet werden.

Verwendung

Die Grid-Listen-Komponente ist rein per CSS geschrieben und erfordert nur HTML-Code, um wirksam zu werden.

Verwandte Themen

Material Design-Richtlinien: Komponenten - Grid-Listen

Stil

Basis-Stil

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

Aktionsleisten-Text

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

Die Aktionsleiste kann zwei Textzeilen enthalten.

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

Aktionsleisten-Button

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

Aktionsleisten-Stil

Durch Hinzufügen der Klasse .mdui-grid-tile-actions-top zu .mdui-grid-tile-actions kann die Aktionsleiste am oberen Rand der Zelle platziert werden.

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

Durch Hinzufügen der Klasse .mdui-grid-tile-actions-transparent zu .mdui-grid-tile-actions kann die Aktionsleiste einen transparenten Hintergrund erhalten.

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

Durch Hinzufügen der Klasse .mdui-grid-tile-actions-gradient zu .mdui-grid-tile-actions kann die Aktionsleiste einen Verlaufs-Hintergrund erhalten.

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

Layout mit dem Grid-System

Durch Hinzufügen der Klasse .mdui-grid-list zu .mdui-row-* mit gleichmäßig verteilten Spalten kann der Abstand zwischen den Zellen auf 4px eingestellt werden.

codeplay_arrow
Beispiel
<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-Klassenliste

KlassennameBeschreibung
.mdui-grid-tileDefiniert eine Kachel in einer Grid-Liste.
.mdui-grid-tile-actionsDefiniert die Aktionsleiste in einer Kachel.
.mdui-grid-tile-actions-topPlatziert die Aktionsleiste am oberen Rand der Kachel.
.mdui-grid-tile-actions-transparentGibt der Aktionsleiste einen transparenten Hintergrund.
.mdui-grid-tile-actions-gradientGibt der Aktionsleiste einen Verlaufs-Hintergrund.
.mdui-grid-tile-textDefiniert den Text in der Aktionsleiste einer Kachel.
.mdui-grid-tile-titleDefiniert den Titel im Text der Aktionsleiste einer Kachel.
.mdui-grid-tile-subtitleDefiniert den Untertitel im Text der Aktionsleiste einer Kachel.
.mdui-grid-tile-buttonsDefiniert den Button-Bereich in der Aktionsleiste einer Kachel.
.mdui-grid-listDefiniert eine Grid-Liste. Wird in Kombination mit dem Grid-Layout-System verwendet.
arrow_backPrevious
Listen-Steuerelemente
arrow_forwardNext
Tab