near_me
Erste Schritte
keyboard_arrow_downlayers
Stil
keyboard_arrow_downwidgets
Komponenten
keyboard_arrow_downlocal_mall
Ressourcen
keyboard_arrow_downDas neue mdui 2 auf Basis von Material Design 3 und Web Components ist da. Zur mdui 2 Dokumentation wechseln.
Navigation Drawer
Der Navigation Drawer in mdui kann von der linken oder rechten Seite der Seite herausgleiten; eine Seite kann mehrere Navigation Drawers enthalten.
Das Verhalten des Navigation Drawers auf Smartphones, Tablets und Desktop-Geräten unterscheidet sich geringfügig. Sie können die Änderungen am Navigation Drawer auf der linken Seite dieser Seite beobachten, indem Sie die Breite Ihres Browsers ändern:
- Höhe
- Auf Smartphones und Tablets beträgt die Höhe des Navigation Drawers immer 100 %.
- Auf Desktop-Geräten überlagert der Navigation Drawer standardmäßig nicht die App Bar und hat einen Abstand von der Oberseite der Seite in Höhe der App Bar. Durch Hinzufügen der Klasse
.mdui-drawer-full-heightkann die Höhe des Navigation Drawers auf 100 % festgelegt werden; in diesem Fall kann der Navigation Drawer die App Bar überlagern. Sie können die Klasse.mdui-appbar-insetzur App Bar hinzufügen, damit diese nicht vom Navigation Drawer überlagert wird.
- Hintergrundfarbe und Schatten
- Auf Smartphones und Tablets hat der Navigation Drawer standardmäßig einen weißen Hintergrund und einen Schatten.
- Auf Desktop-Geräten hat der Navigation Drawer standardmäßig einen transparenten Hintergrund und keinen Schatten. Durch Hinzufügen der Klasse
.mdui-color-[color]kann die Hintergrundfarbe des Navigation Drawers festgelegt und ein Schatten hinzugefügt werden.
- Sichtbarkeitsstatus
- Auf Smartphones und Tablets ist der Navigation Drawer standardmäßig ausgeblendet.
- Auf Desktop-Geräten wird der Navigation Drawer standardmäßig angezeigt.
- Durch Hinzufügen der Klasse
.mdui-drawer-openwird der Navigation Drawer auf allen Geräten standardmäßig angezeigt. Das Hinzufügen der Klasse.mdui-drawer-closeblendet den Navigation Drawer auf allen Geräten standardmäßig aus.
- Overlay
- Auf Smartphones und Tablets wird beim Öffnen des Navigation Drawers immer ein Overlay angezeigt.
- Auf Desktop-Geräten wird beim Öffnen des Navigation Drawers standardmäßig kein Overlay angezeigt. Durch Setzen des Parameters
overlayauftruekann beim Öffnen des Navigation Drawers ein Overlay angezeigt werden. Wenn ein Overlay angezeigt werden soll, sollte die Klasse.mdui-drawer-closehinzugefügt werden, damit der Navigation Drawer standardmäßig ausgeblendet ist.
Verwendung
- (Wenn die Komponente dynamisch generiert wird, muss
mdui.mutation()zur Initialisierung aufgerufen werden) - Aufruf über JavaScript
Verwandte Themen
Verwendung
HTML-Struktur
<!-- Die Klasse mdui-drawer-body-left fügt dem Body padding-left hinzu; diese Klasse muss hinzugefügt werden, wenn sich auf der linken Seite ein standardmäßig geöffneter Navigation Drawer befindet. -->
<!-- Die Klasse mdui-drawer-body-right fügt dem Body padding-right hinzu; diese Klasse muss hinzugefügt werden, wenn sich auf der rechten Seite ein standardmäßig geöffneter Navigation Drawer befindet. -->
<body class="mdui-drawer-body-left mdui-drawer-body-right">
<!-- Standard-Navigation Drawer auf der linken Seite -->
<div class="mdui-drawer">
... drawer content ...
</div>
<!-- Um den Navigation Drawer auf der rechten Seite anzuzeigen, muss die Klasse mdui-drawer-right hinzugefügt werden. -->
<div class="mdui-drawer mdui-drawer-right">
... drawer content ...
</div>
</body>Aufruf über Attribute
Bei dieser Methode ist kein JavaScript-Code erforderlich. Fügen Sie einfach das Attribut mdui-drawer="options" zu einem Steuerelement (z. B. einem Button) hinzu. Bei Verwendung benutzerdefinierter Attribute muss ein zusätzlicher target-Parameter hinzugefügt werden, um den gesteuerten Navigation Drawer anzugeben; sein Wert ist der CSS-Selektor des gesteuerten Navigation Drawers.
<body class="mdui-drawer-body-right">
<button class="mdui-btn" mdui-drawer="{target: '#left-drawer'}">open left drawer</button>
<div class="mdui-drawer" id="left-drawer">
... left drawer content ...
<button class="mdui-btn" mdui-drawer-close>close</button>
</div>
</body>Elemente innerhalb des Navigation Drawers können Attribute hinzugefügt werden, um Ereignisse zu binden; diese Attribute können auch bei der JavaScript-Aufrufmethode verwendet werden.
| Attribut | Beschreibung |
|---|---|
mdui-drawer-close | Klicks auf dieses Element lösen das Ereignis close.mdui.drawer aus und schließen den Navigation Drawer. |
Aufruf über JavaScript
// selector ist der CSS-Selektor oder das DOM-Element des Navigation Drawers.
// options sind die Konfigurationsparameter, siehe die Parameterliste unten.
var inst = new mdui.Drawer(selector, options);Parameter
| Parametername | Typ | Standardwert | Beschreibung |
|---|---|---|---|
overlay | boolean | false | Gibt an, ob beim Öffnen des Navigation Drawers ein Overlay angezeigt werden soll. Dieser Parameter gilt nur für mittlere Bildschirme und größer; auf sehr kleinen und kleinen Bildschirmen wird immer ein Overlay angezeigt. |
swipe | boolean | false | Gibt an, ob Wischgesten aktiviert sind. |
Methode
| Methodenname | Beschreibung |
|---|---|
open | Navigation Drawer anzeigen. |
close | Navigation Drawer ausblenden. |
toggle | Umschalten des Sichtbarkeitsstatus des Navigation Drawers. |
getState | Gibt den aktuellen Status des Navigation Drawers zurück. Es gibt vier Status (opening, opened, closing, closed). |
Ereignis
| Ereignisname | Beschreibung | Ziel | Parameter |
|---|---|---|---|
open.mdui.drawer | Das Ereignis wird ausgelöst, wenn die Öffnungsanimation des Navigation Drawers beginnt. | <div class="mdui-drawer"></div> | event._detail.inst: Instanz |
opened.mdui.drawer | Das Ereignis wird ausgelöst, wenn die Öffnungsanimation des Navigation Drawers abgeschlossen ist. | ||
close.mdui.drawer | Das Ereignis wird ausgelöst, wenn die Schließanimation des Navigation Drawers beginnt. | ||
closed.mdui.drawer | Das Ereignis wird ausgelöst, wenn die Schließanimation des Navigation Drawers abgeschlossen ist. |
CSS-Klassenliste
| Klassenname | Beschreibung |
|---|---|
.mdui-drawer | Definiert einen Navigation Drawer. |
.mdui-drawer-right | Der Navigation Drawer auf der rechten Seite der Seite. |
.mdui-drawer-full-height | Lässt den Navigation Drawer 100 % der Höhe einnehmen. |
.mdui-drawer-open | Lässt den Navigation Drawer standardmäßig angezeigt werden. |
.mdui-drawer-close | Lässt den Navigation Drawer standardmäßig ausgeblendet sein. |
.mdui-drawer-body-left | Fügt dem body ein padding-left hinzu. |
.mdui-drawer-body-right | Fügt dem body ein padding-right hinzu. |