NavigationRail
Die Navigation Rail bietet auf Tablets und Desktop-Computern schnellen Zugriff auf verschiedene Hauptseiten.
Importieren Sie die Komponenten nach Bedarf:
import 'mdui/components/navigation-rail.js';
import 'mdui/components/navigation-rail-item.js';
Importieren Sie die TypeScript-Typen der Komponenten nach Bedarf:
import type { NavigationRail } from 'mdui/components/navigation-rail.js';
import type { NavigationRailItem } from 'mdui/components/navigation-rail-item.js';
Beispiel: (Das style="position: relative" im Beispiel dient nur zur Veranschaulichung; entfernen Sie dieses Stilattribut in echten Projekten.)
Recent
Images
Library
<mdui-navigation-rail value="recent" style="position: relative">
<mdui-navigation-rail-item icon="watch_later--outlined" value="recent">Recent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined" value="images">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined" value="library">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>
Wichtige Hinweise:
Diese Komponente verwendet standardmäßig die Positionierung position: fixed und fügt automatisch padding-left oder padding-right zum body hinzu, 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 der <mdui-navigation-rail>-Komponente auf true gesetzt ist. In diesem Fall wird padding-left oder padding-right zum übergeordneten Element hinzugefügt.
- Wenn sie sich innerhalb von
<mdui-layout></mdui-layout> befindet. In diesem Fall wird kein padding-left oder padding-right hinzugefügt.
Standardmäßig wird die Navigation Rail links oder rechts im aktuellen Fenster angezeigt. Wenn Sie die Navigation Rail in einem bestimmten Container platzieren möchten, können Sie der <mdui-navigation-rail>-Komponente das Attribut contained hinzufügen. In diesem Fall wird die Navigation Rail relativ zu ihrem übergeordneten Element angezeigt (Sie müssen dem übergeordneten Element selbst den Stil position: relative hinzufügen).
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Recent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Seiteninhalt</div>
</div>
</div>
Quellcode
Setzen Sie das Attribut placement auf right in der <mdui-navigation-rail>-Komponente, um die Navigation Rail auf der rechten Seite anzuzeigen.
<div style="position: relative">
<mdui-navigation-rail placement="right" contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Recent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Seiteninhalt</div>
</div>
</div>
Quellcode
Fügen Sie das Attribut divider zur <mdui-navigation-rail>-Komponente hinzu, um eine Trennlinie an der Navigation Rail anzuzeigen und sie so vom Seiteninhalt zu unterscheiden.
<div style="position: relative">
<mdui-navigation-rail divider contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Recent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Seiteninhalt</div>
</div>
</div>
Quellcode
Sie können über die Slots top und bottom innerhalb der <mdui-navigation-rail>-Komponente Elemente oben und unten hinzufügen.
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-button-icon icon="menu" slot="top"></mdui-button-icon>
<mdui-fab lowered icon="edit--outlined" slot="top"></mdui-fab>
<mdui-button-icon icon="settings" slot="bottom"></mdui-button-icon>
<mdui-navigation-rail-item icon="watch_later--outlined">Recent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 600px;overflow: auto">
<div style="height: 1000px">Seiteninhalt</div>
</div>
</div>
Quellcode
Setzen Sie das Attribut alignment der <mdui-navigation-rail>-Komponente, um die vertikale Ausrichtung der Navigationselemente zu ändern.
Recent
Images
Library
start
center
end
<div class="example-alignment" style="position: relative">
<mdui-navigation-rail alignment="start" contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Recent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 360px;overflow: auto">
<mdui-segmented-button-group value="start" selects="single">
<mdui-segmented-button value="start">start</mdui-segmented-button>
<mdui-segmented-button value="center">center</mdui-segmented-button>
<mdui-segmented-button value="end">end</mdui-segmented-button>
</mdui-segmented-button-group>
</div>
</div>
<script>
const example = document.querySelector(".example-alignment");
const navigationRail = example.querySelector("mdui-navigation-rail");
const segmentedButtonGroup = example.querySelector("mdui-segmented-button-group");
segmentedButtonGroup.addEventListener("change", (event) => {
navigationRail.alignment = event.target.value;
});
</script>
Quellcode
Bei der <mdui-navigation-rail-item>-Komponente legen Sie mit dem Attribut icon das Symbol für den nicht-aktivierten Zustand fest und mit active-icon das Symbol für den aktivierten Zustand. Sie können die Symbolelemente für beide Zustände auch über die Slots icon und active-icon festlegen.
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Recent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined" active-icon="image--filled">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item>
Library
<mdui-icon slot="icon" name="library_music--outlined"></mdui-icon>
<mdui-icon slot="active-icon" name="library_music--filled"></mdui-icon>
</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Seiteninhalt</div>
</div>
</div>
Quellcode
Die <mdui-navigation-rail-item>-Komponente kann auch nur mit einem Symbol ohne Text verwendet werden.
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined"></mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined"></mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined"></mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Seiteninhalt</div>
</div>
</div>
Quellcode
Setzen Sie das Attribut href auf der <mdui-navigation-rail-item>-Komponente, um das Navigationselement in einen Link zu verwandeln. Sie können dann auch die Attribute download, target und rel verwenden.
<div style="position: relative">
<mdui-navigation-rail divider contained>
<mdui-navigation-rail-item
href="https://www.mdui.org"
target="_blank"
icon="watch_later--outlined"
>Recent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Seiteninhalt</div>
</div>
</div>
Quellcode
In der <mdui-navigation-rail-item>-Komponente können Sie über den Slot badge ein Badge hinzufügen.
Recent
99+
Images
Library
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">
Recent
<mdui-badge slot="badge">99+</mdui-badge>
</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Seiteninhalt</div>
</div>
</div>
Quellcode| Attribut | Property | Reflect | Typ | Standard |
|---|
icon | icon | | string | - |
Gibt den Namen des Material Icons für den inaktiven Zustand an. Alternativ können Sie slot="icon" verwenden.
|
active-icon | activeIcon | | string | - |
Gibt den Namen des Material Icons für den aktiven Zustand an. Alternativ können Sie slot="active-icon" verwenden.
|
value | value | | string | - |
Der Wert des Navigationselements.
|
href | href | | string | - |
Die URL für den Link. Wenn gesetzt, wird die Komponente als <a>-Element gerendert und unterstützt Link-bezogene Attribute.
|
download | download | | string | - |
Lädt die verlinkte URL herunter.
Hinweis: Nur verfügbar, wenn href angegeben ist.
|
target | target | | '_blank' | '_parent' | '_self' | '_top' | - |
Legt fest, wo die verlinkte URL geöffnet wird. Mögliche Werte:
_blank: Öffnet in einem neuen Tab oder Fenster._parent: Öffnet im übergeordneten Browsing-Kontext oder _self, wenn kein übergeordneter Kontext vorhanden ist._self: Öffnet im aktuellen Browsing-Kontext (Standard)._top: Öffnet im obersten Browsing-Kontext oder _self, wenn kein übergeordneter Kontext vorhanden ist.
Hinweis: Nur verfügbar, wenn href angegeben ist.
|
rel | rel | | 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag' | - |
Gibt die Beziehung der verlinkten URL als durch Leerzeichen getrennte Link-Typen an. Mögliche Werte:
alternate: Eine alternative Version des aktuellen Dokuments.author: Der Autor des aktuellen Dokuments oder Artikels.bookmark: Der Permalink des übergeordneten Abschnitts.external: Das referenzierte Dokument ist nicht Teil derselben Website wie das aktuelle Dokument.help: Ein Link zu kontextsensitiver Hilfe.license: Inhalt, der durch die im referenzierten Dokument beschriebene Urheberrechtslizenz abgedeckt ist.me: Links zu Inhalten, die dem Autor des aktuellen Dokuments gehören.next: Das nächste Dokument in der Serie.nofollow: Gibt an, dass der ursprüngliche Autor oder Herausgeber des aktuellen Dokuments das referenzierte Dokument nicht unterstützt.noreferrer: Verhindert das Senden des Referer-Headers. Hat die gleiche Wirkung wie noopener.opener: Erstellt einen neuen Browsing-Kontext, wenn der Hyperlink ansonsten in einem obersten Kontext geöffnet würde, der nicht sekundär ist (z. B. wenn target="_blank" angegeben ist).prev: Das vorherige Dokument in der Serie.search: Links zu einer Ressource, die verwendet werden kann, um im aktuellen Dokument und seinen verwandten Seiten zu suchen.tag: Markiert das aktuelle Dokument mit dem angegebenen Tag.
Hinweis: Nur verfügbar, wenn href angegeben ist.
|
autofocus | autofocus | | boolean | false |
Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
|
tabindex | tabIndex | | number | - |
Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.
|
| Name | Parameter | Rückgabewert |
|---|
click | | void |
Simuliert einen Mausklick auf das Element.
|
focus | options: FocusOptions (Optional)
| void |
Setzt den Fokus auf das Element. Der optionale Objektparameter kann eine preventScroll-Eigenschaft enthalten. Wenn preventScroll auf true gesetzt ist, scrollt die Seite nicht, um das fokussierte Element in den sichtbaren Bereich zu bringen.
|
blur | | void |
Entfernt den Fokus vom Element.
|
| Name |
|---|
focus |
Wird ausgelöst, wenn das Navigation Rail Item den Fokus erhält.
|
blur |
Wird ausgelöst, wenn das Navigation Rail Item den Fokus verliert.
|
| Attribut | Property | Reflect | Typ | Standard |
|---|
value | value | | string | - |
Der Wert des ausgewählten <mdui-navigation-rail-item>.
|
placement | placement | | 'left' | 'right' | 'left' |
Legt die Position der Navigation Rail fest. Mögliche Werte:
left: Wird links angezeigt.right: Wird rechts angezeigt.
|
alignment | alignment | | 'start' | 'center' | 'end' | 'start' |
Legt die Ausrichtung der <mdui-navigation-rail-item>-Elemente fest. Mögliche Werte:
start: Oben ausrichten.center: Zentriert ausrichten.end: Unten ausrichten.
|
contained | contained | | boolean | false |
Standardmäßig wird die Navigation Rail relativ zum body-Element positioniert. Wenn gesetzt, wird sie relativ zu ihrem übergeordneten Element positioniert.
Hinweis: Sie müssen manuell position: relative; auf dem übergeordneten Element setzen, wenn dieses Attribut gesetzt ist.
|
divider | divider | | boolean | false |
Fügt eine Trennlinie zwischen der Navigation Rail und dem Seiteninhalt hinzu.
|
order | order | | number | - |
Gibt die Layout-Reihenfolge innerhalb der <mdui-layout>-Komponente an. Die Elemente werden in aufsteigender Reihenfolge sortiert. Der Standardwert ist 0.
|
| Name |
|---|
change |
Wird ausgelöst, wenn sich der Wert ändert.
|
| Name |
|---|
| Standard |
Enthält <mdui-navigation-rail-item>-Komponenten.
|
top |
Oberes Element.
|
bottom |
Unteres Element.
|
| Name |
|---|
top |
Container für das obere Element.
|
bottom |
Container für das untere Element.
|
items |
Container für <mdui-navigation-rail-item>-Komponenten.
|
| 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
NavigationDrawer
