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

App Bar

Top App Bars erscheinen normalerweise am oberen Rand einer Seite und können Toolbars, Tabs und andere Komponenten enthalten. Eine Seite kann nur eine Top App Bar enthalten.

Verwendung

Die Top-App-Bar ist rein per CSS umgesetzt; es reicht aus, den HTML-Code zu schreiben, damit sie funktioniert.

Farbe

Eine Top App Bar hat standardmäßig keine Hintergrundfarbe. Sie können die Hintergrundfarbe für Elemente darin festlegen, wie z. B. Toolbars und Tabs.

Verwandte Themen

Material Design-Richtlinien: Struktur - Top App Bar

Stil

Nur Toolbar

codeplay_arrow
Beispiel
<div class="mdui-appbar">
  <div class="mdui-toolbar mdui-color-theme">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-headline">MDUI</a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <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>
</div>

Nur Tabs

codeplay_arrow
Beispiel
<div class="mdui-appbar">
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">web</a>
    <a href="#example3-tab2" class="mdui-ripple mdui-ripple-white">shopping</a>
    <a href="#example3-tab3" class="mdui-ripple mdui-ripple-white">videos</a>
  </div>
</div>

Toolbar und Tabs

codeplay_arrow
Beispiel
<div class="mdui-appbar">
  <div class="mdui-toolbar mdui-color-theme">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <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>
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">web</a>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">shopping</a>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">videos</a>
  </div>
</div>
codeplay_arrow
Beispiel
<div class="mdui-appbar">
  <div class="mdui-toolbar mdui-color-theme">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <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>
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example6-tab1" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">phone</i>
      <label>recents</label>
    </a>
    <a href="#example6-tab2" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">favorite</i>
      <label>favorites</label>
    </a>
    <a href="#example6-tab3" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">perm_contact_calendar</i>
      <label>nearby</label>
    </a>
  </div>
</div>

Transparenter Hintergrund

Sie müssen die Klasse .mdui-shadow-0 hinzufügen, um den Schatten der Top-App-Bar zu entfernen.

codeplay_arrow
Beispiel
<div class="mdui-appbar mdui-shadow-0">
  <div class="mdui-toolbar">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <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>
</div>

Am oberen Seitenrand fixiert

Das Hinzufügen der Klasse .mdui-appbar-fixed zu <div class="mdui-appbar"></div> fixiert die Top App Bar am oberen Rand der Seite, sodass sie nicht mit dem restlichen Seiteninhalt scrollt.

Um zu verhindern, dass die Top App Bar den Seiteninhalt verdeckt, müssen Sie dem body-Element eine Klasse hinzufügen, um dem body ein padding-top hinzuzufügen:

  • .mdui-appbar-with-toolbar: Diese Klasse ist erforderlich, wenn die Top App Bar eine Toolbar enthält.
  • .mdui-appbar-with-tab: Diese Klasse ist erforderlich, wenn die Top App Bar Tabs enthält.
  • .mdui-appbar-with-tab-larger: Diese Klasse ist erforderlich, wenn die Top App Bar Tabs mit sowohl Icons als auch Text enthält.

Wenn die Top App Bar andere Elemente als Toolbars und Tabs enthält, müssen Sie das entsprechende padding-top für den body selbst hinzufügen.

Beispiel 1Beispiel 2Beispiel 3

Top-App-Bar automatisch ausblenden

Das Hinzufügen der Klasse .mdui-appbar-scroll-hide zu <div class="mdui-appbar"></div> blendet die Top App Bar beim Herunterscrollen aus und beim Heraufscrollen wieder ein.

Wenn Elemente dynamisch generiert werden, müssen Sie mdui.mutation() aufrufen, um sie zu initialisieren.

<body class="mdui-appbar-with-toolbar">
  <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-hide">
    <div class="mdui-toolbar">
      ......
    </div>
  </div>
</body>
Ausführen

Toolbar in der Top-App-Bar automatisch ausblenden

Das Hinzufügen der Klasse .mdui-appbar-scroll-toolbar-hide zu <div class="mdui-appbar"></div> blendet die Toolbar beim Herunterscrollen aus und beim Heraufscrollen wieder ein, wenn sowohl eine Toolbar als auch Tabs in der Top App Bar vorhanden sind.

Wenn Elemente dynamisch generiert werden, müssen Sie mdui.mutation() aufrufen, um sie zu initialisieren.

<body class="mdui-appbar-with-toolbar mdui-appbar-with-tab">
  <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-toolbar-hide">
    <div class="mdui-toolbar">
      ......
    </div>
    <div class="mdui-tab">
      ......
    </div>
  </div>
</body>
Ausführen

CSS-Klassenliste

KlassennameBeschreibung
.mdui-appbarDefinieren Sie eine Top App Bar.
.mdui-appbar-fixedFixieren Sie die Top App Bar am oberen Rand der Seite.
.mdui-appbar-with-toolbarDiese Klasse sollte zum body hinzugefügt werden, wenn die Top App Bar eine Toolbar enthält.
.mdui-appbar-with-tabDiese Klasse sollte zum body hinzugefügt werden, wenn die Top App Bar Tabs enthält.
.mdui-appbar-with-tab-largerDiese Klasse sollte zum body hinzugefügt werden, wenn die Top App Bar Tabs mit sowohl Icons als auch Text enthält.
.mdui-appbar-scroll-hideBlenden Sie die Top App Bar beim Herunterscrollen aus und beim Heraufscrollen ein.
.mdui-appbar-scroll-toolbar-hideBlenden Sie die Toolbar beim Herunterscrollen aus und beim Heraufscrollen ein, wenn sowohl eine Toolbar als auch Tabs in der Top App Bar vorhanden sind.
arrow_backPrevious
Toolbar
arrow_forwardNext
Navigation Drawer