NavigationDrawer

Der Navigation Drawer bietet eine seitliche Navigation, mit der Benutzer schnell auf verschiedene Seiten oder Inhalte zugreifen können.

Normalerweise können Sie die <mdui-list>-Komponente verwenden, um Navigationselemente im Navigation Drawer hinzuzufügen.

Verwendung

Importieren Sie die Komponente nach Bedarf:

import 'mdui/components/navigation-drawer.js';

Importieren Sie den TypeScript-Typ der Komponente nach Bedarf:

import type { NavigationDrawer } from 'mdui/components/navigation-drawer.js';

Beispiel:

Navigation Drawer schließen

Navigation Drawer öffnen

<mdui-navigation-drawer close-on-overlay-click class="example-drawer">
  <mdui-button>Navigation Drawer schließen</mdui-button>
</mdui-navigation-drawer>

<mdui-button>Navigation Drawer öffnen</mdui-button>

<script>
  const navigationDrawer = document.querySelector(".example-drawer");
  const openButton = navigationDrawer.nextElementSibling;
  const closeButton = navigationDrawer.querySelector("mdui-button");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

Wichtige Hinweise:

Diese Komponente verwendet standardmäßig die Positionierung position: fixed.

Wenn modal auf false gesetzt ist und die Bildschirmgröße größer oder gleich --mdui-breakpoint-md ist, wird automatisch padding-left oder padding-right zum body hinzugefügt, um zu verhindern, dass Seiteninhalte von dieser Komponente verdeckt werden.

In den folgenden zwei Fällen wird jedoch standardmäßig die Positionierung position: absolute verwendet:

Wenn das Attribut contained auf true gesetzt ist.
Wenn sich die Komponente innerhalb von <mdui-layout></mdui-layout> befindet. In diesem Fall wird kein padding-left oder padding-right hinzugefügt.

Beispiele

Innerhalb eines angegebenen Containers

Standardmäßig wird der Navigation Drawer links oder rechts im aktuellen Fenster angezeigt. Wenn Sie den Navigation Drawer in einem bestimmten Container platzieren möchten, können Sie das Attribut contained hinzufügen. In diesem Fall wird der Navigation Drawer relativ zum übergeordneten Element angezeigt (Sie müssen dem übergeordneten Element selbst die Stile position: relative; overflow: hidden; hinzufügen).

Navigation Drawer schließen

Navigation Drawer öffnen

<div class="example-contained" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer contained>
    <mdui-button class="close">Navigation Drawer schließen</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Navigation Drawer öffnen</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-contained");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

Quellcode

Fügen Sie das Attribut modal hinzu, um beim Öffnen des Navigation Drawer eine Overlay-Schicht anzuzeigen. Beachten Sie, dass diese Einstellung ignoriert wird, wenn die Fenster- oder übergeordnete Elementbreite kleiner als --mdui-breakpoint-md ist. In diesem Fall wird immer eine Overlay-Schicht angezeigt.

Fügen Sie das Attribut close-on-esc hinzu, um den Navigation Drawer durch Drücken der ESC-Taste zu schließen.

Fügen Sie das Attribut close-on-overlay-click hinzu, um den Navigation Drawer durch Klick auf die Overlay-Schicht zu schließen.

<div class="example-modal" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer modal close-on-esc close-on-overlay-click contained>
    <mdui-button class="close">Navigation Drawer schließen</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Navigation Drawer öffnen</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-modal");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

Quellcode

Rechts positionieren

Setzen Sie das Attribut placement auf right, um den Navigation Drawer auf der rechten Seite der Seite anzuzeigen.

Navigation Drawer schließen

Navigation Drawer öffnen

<div class="example-placement" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer placement="right" modal close-on-esc close-on-overlay-click contained>
    <mdui-button class="close">Navigation Drawer schließen</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Navigation Drawer öffnen</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-placement");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

Quellcode

API

Eigenschaften

Attribut	Property	Typ	Standard
`open`	`open`	`boolean`	`false`
Öffnet den Navigation Drawer.
`modal`	`modal`	`boolean`	`false`
Zeigt ein Overlay an, wenn geöffnet. Auf schmalen Geräten (Bildschirmbreite < `--mdui-breakpoint-md`) wird das Overlay immer angezeigt.
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
Schließt den Drawer, wenn die ESC-Taste gedrückt wird und ein Overlay vorhanden ist.
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
Schließt den Drawer, wenn auf das Overlay geklickt wird.
`placement`	`placement`	`'left' \| 'right'`	`'left'`
Legt die Position des Drawers fest. Mögliche Werte: `left`: Wird auf der linken Seite angezeigt. `right`: Wird auf der rechten Seite angezeigt.
`contained`	`contained`	`boolean`	`false`
Standardmäßig wird der Navigation Drawer relativ zum `body`-Element positioniert. Wenn gesetzt, wird er relativ zu seinem übergeordneten Element positioniert. Hinweis: Sie müssen manuell `position: relative; overflow: hidden;` auf dem übergeordneten Element setzen, wenn dieses Attribut gesetzt ist.
`order`	`order`	`number`	-
Gibt die Layout-Reihenfolge innerhalb der `<mdui-layout>`-Komponente an. Die Elemente werden in aufsteigender Reihenfolge sortiert. Der Standardwert ist `0`.

Ereignisse

Name
`open`
Wird ausgelöst, wenn der Navigation Drawer beginnt, sich zu öffnen. Kann mit `event.preventDefault()` verhindert werden.
`opened`
Wird ausgelöst, nachdem der Navigation Drawer geöffnet wurde und die Animationen abgeschlossen sind.
`close`
Wird ausgelöst, wenn der Navigation Drawer beginnt, sich zu schließen. Kann mit `event.preventDefault()` verhindert werden.
`closed`
Wird ausgelöst, nachdem der Navigation Drawer geschlossen wurde und die Animationen abgeschlossen sind.
`overlay-click`
Wird ausgelöst, wenn auf das Overlay geklickt wird.

Slots

Name
Standard
Inhalt des Navigation Drawer.

CSS Parts

Name
`overlay`
Overlay-Element.
`panel`
Container für den Navigation Drawer.

CSS Custom Property

Name
`--shape-corner`
Der Eckradius der Komponente. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.
`--z-index`
Der CSS `z-index`-Wert der Komponente.

Vorherige Seite

NavigationBar

Nächste Seite

NavigationRail