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

Toolbar

Eine Toolbar ist eine Sammlung horizontal angeordneter Elemente wie Text, Links, Buttons, Icon Buttons und ähnlicher Komponenten.

Verwendung

Toolbar-Komponenten sind rein in CSS umgesetzt und werden durch einfaches HTML aktiviert.

Farbe

Standardmäßig ein transparenter Hintergrund. Durch Hinzufügen der Klasse .mdui-color-[color] kann eine Hintergrundfarbe festgelegt werden.

Stil

Basisstil

In einer Toolbar können folgende Elemente platziert werden:

Text: <span>Titel</span>
Links: <a href="#">Link</a>
Buttons: <a href="#" class="mdui-btn">Button</a>
Icon Buttons: <a href="#" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a>
Icons: <i class="mdui-icon material-icons">menu</i>

Durch Hinzufügen von <div class="mdui-toolbar-spacer"></div> wird der Inhalt auf beiden Seiten dieses Elements an die Ränder geschoben.

Beispiel

<div class="mdui-toolbar">
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">menu</i>
  </a>
  <span class="mdui-typo-title">Title</span>
  <div class="mdui-toolbar-spacer"></div>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">search</i>
  </a>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">refresh</i>
  </a>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">more_vert</i>
  </a>
</div>

Hintergrundfarbe