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

Menü

Grid-Listen bestehen aus einer Reihe von Zellen und werden üblicherweise zur Anzeige von Fotoalben verwendet. Sie können in Kombination mit dem <a href="/de/docs/1/grid">Grid-Layout-System</a> für das Layout verwendet werden.

Verwendung

Aufruf über Attribute
Aufruf über JavaScript

Stil

Material Design-Richtlinien: Komponenten - Grid-Listen

Aktionsleisten-Button

Aktionsleisten-Stil

Beispiel

<ul class="mdui-menu">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Refresh</a>
  </li>
  <li class="mdui-menu-item" disabled>
    <a href="javascript:;">Help & feedback</a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Settings</a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Sign out</a>
  </li>
</ul>

Basis-Stil

Beispiel

<ul class="mdui-menu">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >remove_red_eye</i
      >Preview
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >file_download</i
      >Download
    </a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons">delete</i
      >Remove
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon"></i>Empty
    </a>
  </li>
</ul>

Aktionsleisten-Text

Layout mit dem Grid-System

Die Aktionsleiste kann zwei Textzeilen enthalten.

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.

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

Beispiel

<ul class="mdui-menu mdui-menu-cascade">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >format_bold</i
      >
      Bold
      <span class="mdui-menu-item-helper">Ctrl+B</span>
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >format_italic</i
      >
      Italic
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon"></i>
      Superscript
      <span class="mdui-menu-item-helper">Ctrl+.</span>
    </a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      Paragraph style
      <span class="mdui-menu-item-more"></span>
    </a>
    <ul class="mdui-menu mdui-menu-cascade">
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Single
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons"
            >check</i
          >1.15
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Double
        </a>
      </li>
    </ul>
  </li>
</ul>

Verwendung

Aufruf über Attribute

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

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.

Beispiel

<button
  class="mdui-btn mdui-color-theme-accent"
  mdui-menu="{target: '#example-attr'}"
>
  open
</button>

<ul class="mdui-menu" id="example-attr">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Refresh</a>
  </li>
  <li class="mdui-menu-item" disabled>
    <a href="javascript:;">Help & feedback</a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Settings</a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Sign out</a>
  </li>
</ul>

Beispiel

<button
  class="mdui-btn mdui-color-theme-accent"
  mdui-menu="{target: '#demo-attr-cascade'}"
>
  cascade menu
</button>

<ul class="mdui-menu mdui-menu-cascade" id="demo-attr-cascade">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >format_bold</i
      >
      Bold
      <span class="mdui-menu-item-helper">Ctrl+B</span>
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >format_italic</i
      >
      Italic
      <span class="mdui-menu-item-helper">Ctrl+I</span>
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon"></i>
      Superscript
      <span class="mdui-menu-item-helper">Ctrl+.</span>
    </a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      Paragraph style
      <span class="mdui-menu-item-more"></span>
    </a>
    <ul class="mdui-menu mdui-menu-cascade">
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Single
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>1.15
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Double
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons"
            >check</i
          >Custom: 1.2
        </a>
      </li>
      <li class="mdui-divider"></li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple"
          >Add space before paragraph</a
        >
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple"
          >Add space after paragraph</a
        >
      </li>
      <li class="mdui-divider"></li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">Custom spacing...</a>
      </li>
    </ul>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      Line spacing
      <span class="mdui-menu-item-more"></span>
    </a>
    <ul class="mdui-menu mdui-menu-cascade">
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>
          Single
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>
          1.15
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>
          Double
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons"
            >check</i
          >
          Custom: 1.2
          <span class="mdui-menu-item-more"></span>
        </a>
        <ul class="mdui-menu mdui-menu-cascade">
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">
              Line spacing
              <span class="mdui-menu-item-helper">1.2</span>
            </a>
          </li>
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">
              Paragraph spacing before
              <span class="mdui-menu-item-helper">1.2</span>
            </a>
          </li>
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">
              Paragraph spacing after
              <span class="mdui-menu-item-helper">1.5</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Aufruf über JavaScript

Definiert eine Kachel in einer Grid-Liste.

// Definiert die Aktionsleiste in einer Kachel.
// Platziert die Aktionsleiste am oberen Rand der Kachel.
// Gibt der Aktionsleiste einen transparenten Hintergrund.
var inst = new mdui.Menu(anchorSelector, menuSelector, options);

Ausführen

Parameter

Parametername	Typ	Standardwert	Beschreibung
`position`	`string`	`auto`	Gibt der Aktionsleiste einen Verlaufs-Hintergrund. Definiert den Text in der Aktionsleiste einer Kachel. Definiert den Titel im Text der Aktionsleiste einer Kachel. Definiert den Untertitel im Text der Aktionsleiste einer Kachel. Definiert den Button-Bereich in der Aktionsleiste einer Kachel.
`align`	`string`	`auto`	Definiert eine Grid-Liste. Wird in Kombination mit dem Grid-Layout-System verwendet. Avatare können auf der rechten Seite der Liste stehen. Enthält sowohl Avatare als auch Icons. Icons anstelle von Avataren verwenden. Jeder Listeneintrag kann maximal drei Zeilen Text enthalten. Bei mehr als drei Zeilen sollte stattdessen eine Card verwendet werden.
`gutter`	`int`	`16`	Standardmäßig wird die Texthöhe nicht begrenzt; selbst wenn der Text 3 Zeilen überschreitet, wird er normal angezeigt. Sie können Klassen zu <code>.mdui-list-item-title</code> und <code>.mdui-list-item-text</code> hinzufügen, um die Texthöhe zu begrenzen:
`fixed`	`boolean`	`false`	Klasse <code>.mdui-list-item-one-line</code> hinzufügen, um den Text auf eine Zeilenhöhe zu begrenzen Klasse `.mdui-list-item-two-line` hinzufügen, um den Text auf zwei Zeilenhöhen zu begrenzen Klasse `.mdui-list-item-three-line` hinzufügen, um den Text auf drei Zeilenhöhen zu begrenzen
`covered`	`boolean`	`auto`	Divider in der Liste haben einen vertikalen Abstand von 8px. Entfernen der vertikalen Abstände von Dividern. Bei Verwendung von Subheadern in einer Liste wird automatisch ein Divider über dem Subheader hinzugefügt. Eingefügte Subheader
`subMenuTrigger`	`string`	`hover`	Die Elemente einer kompakten Liste sind enger angeordnet. Ein weiteres Beispiel für eine kompakte Liste. Aktive Elemente erhalten eine Hintergrundfarbe und der Text wird fett gedruckt.
`subMenuDelay`	`int`	`200`	Definition der Liste (erforderlich)

Methode

Methodenname	Beschreibung
`open()`	Definition einer kompakten Liste
`close()`	Definition von Listenelementen (erforderlich)
`toggle()`	Listenelement auf aktiv setzen

Ereignis

Ereignisname	Beschreibung	Ziel	Parameter
`open.mdui.menu`	Definition von Icons in Listenelementen	`<ul class="mdui-menu"></ul>`	Definition von Avataren in Listenelementen
`opened.mdui.menu`	Definition des Inhalts von Listenelementen
`close.mdui.menu`	Definition des Titels im Inhalt eines Listenelements
`closed.mdui.menu`	Definition des Sekundärtextes im Inhalt eines Listenelements

CSS-Klassenliste

Klassenname	Beschreibung
`.mdui-menu`	Text auf eine Zeilenhöhe festlegen
`.mdui-menu-cascade`	Text auf zwei Zeilenhöhen festlegen
`.mdui-menu-item`	Text auf drei Zeilenhöhen festlegen
`.mdui-menu-item-icon`	Definiert Menü-Icons.
`.mdui-menu-item-helper`	Definiert den Hilfetext des Menüs.
`.mdui-menu-item-more`	Nach rechts weisender Pfeil für Menüpunkte mit Untermenüs.

Dialog

Fortschrittsbalken

Menü

Verwendung

Verwandte Themen

Stil

Material Design-Richtlinien: Komponenten - Grid-Listen

Basis-Stil

Aktionsleisten-Text

Verwendung

Aufruf über Attribute

Aufruf über JavaScript

Parameter

Methode

Ereignis

CSS-Klassenliste