NavigationBar

Die Navigation Bar erleichtert auf Mobilgeräten den Wechsel zwischen verschiedenen Hauptseiten.

Verwendung

Importieren Sie die Komponenten nach Bedarf:

import 'mdui/components/navigation-bar.js';
import 'mdui/components/navigation-bar-item.js';

Importieren Sie die TypeScript-Typen der Komponenten nach Bedarf:

import type { NavigationBar } from 'mdui/components/navigation-bar.js';
import type { NavigationBarItem } from 'mdui/components/navigation-bar-item.js';

Beispiel: (Das style="position: relative" im Beispiel dient nur zur Veranschaulichung; entfernen Sie dieses Stilattribut in echten Projekten.)

Item 1

Item 2

Item 3

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
</mdui-navigation-bar>

Wichtige Hinweise:

Diese Komponente verwendet standardmäßig die Positionierung position: fixed und fügt automatisch padding-bottom 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 scroll-target angegeben ist. In diesem Fall wird padding-bottom zum Element scroll-target hinzugefügt.
Wenn sich die Komponente innerhalb von <mdui-layout></mdui-layout> befindet. In diesem Fall wird kein padding-bottom hinzugefügt.

Beispiele

Anzeige der Beschriftung

Die Beschriftung in der Navigation Bar wird standardmäßig immer angezeigt, wenn die Anzahl der Navigationselemente kleiner oder gleich 3 ist. Bei mehr als 3 Navigationselementen wird der Text nur für das ausgewählte Element angezeigt.

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Item 4

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
</mdui-navigation-bar>

<br/>

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="directions_railway" value="item-3">Item 3</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-4">Item 4</mdui-navigation-bar-item>
</mdui-navigation-bar>

Quellcode

Sie können das Attribut label-visibility auf der <mdui-navigation-bar>-Komponente verwenden, um die Anzeige der Beschriftung anzupassen. Mögliche Werte sind:

selected: Nur die Beschriftung des ausgewählten Elements anzeigen
labeled: Beschriftung immer anzeigen
unlabeled: Beschriftung nie anzeigen

Item 1

Item 2

Item 3

ausgewählt

beschriftet

unbeschriftet

<mdui-navigation-bar value="item-1" label-visibility="selected" style="position: relative" class="example-label">
  <mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
</mdui-navigation-bar>

<mdui-segmented-button-group value="selected" selects="single" style="margin-top: 16px">
  <mdui-segmented-button value="selected">ausgewählt</mdui-segmented-button>
  <mdui-segmented-button value="labeled">beschriftet</mdui-segmented-button>
  <mdui-segmented-button value="unlabeled">unbeschriftet</mdui-segmented-button>
</mdui-segmented-button-group>

<script>
  const navigationBar = document.querySelector(".example-label");
  const segmentedButtonGroup = navigationBar.nextElementSibling;

  segmentedButtonGroup.addEventListener("change", (event) => {
    navigationBar.labelVisibility = event.target.value;
  });
</script>

Quellcode

Innerhalb eines angegebenen Containers

Standardmäßig wird die Navigation Bar unten im aktuellen Fenster angezeigt.

Wenn Sie die Navigation Bar in einem bestimmten Container platzieren möchten, geben Sie auf der <mdui-navigation-bar>-Komponente das Attribut scroll-target an. Der Wert kann ein CSS-Selektor oder ein DOM-Element des scrollbaren Inhaltscontainers sein. In diesem Fall wird die Navigation Bar relativ zum übergeordneten Element angezeigt (Sie müssen dem übergeordneten Element selbst die Stile position: relative; overflow: hidden hinzufügen).

Item 1

Item 2

Item 3

Seiteninhalt

<div style="position: relative;overflow: hidden">
  <mdui-navigation-bar scroll-target=".example-scroll-target" value="item-1">
    <mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
  </mdui-navigation-bar>

  <div class="example-scroll-target" style="height: 160px;overflow: auto;">
    <div style="height: 1000px">Seiteninhalt</div>
  </div>
</div>

Quellcode

Beim Scrollen ausblenden

Setzen Sie das Attribut scroll-behavior auf hide in der <mdui-navigation-bar>-Komponente, um die Navigation Bar beim Scrollen nach unten auszublenden und beim Scrollen nach oben wieder einzublenden.

Mit dem Attribut scroll-threshold können Sie festlegen, wie viele Pixel gescrollt werden müssen, bevor die Navigation Bar ausgeblendet wird.

Item 1

Item 2

Item 3

Seiteninhalt

<div style="position: relative;overflow: hidden">
  <mdui-navigation-bar
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-scroll-behavior"
    value="item-1"
  >
    <mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
  </mdui-navigation-bar>

  <div class="example-scroll-behavior" style="height: 160px;overflow: auto;">
    <div style="height: 1000px">Seiteninhalt</div>
  </div>
</div>

Quellcode

Symbol

Bei der <mdui-navigation-bar-item>-Komponente legt das Attribut icon den Namen des Symbols für den nicht-aktivierten Zustand fest. Das Attribut active-icon legt den Namen des Symbols für den aktivierten Zustand fest. Sie können die Symbolelemente für beide Zustände auch über die Slots icon und active-icon festlegen.

Item 1

Item 2

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item
    icon="place--outlined"
    active-icon="place"
    value="item-1"
  >Item 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item value="item-2">
    Item 2
    <mdui-icon slot="icon" name="people--outlined"></mdui-icon>
    <mdui-icon slot="active-icon" name="people"></mdui-icon>
  </mdui-navigation-bar-item>
</mdui-navigation-bar>

Quellcode

Link

Setzen Sie das Attribut href auf der <mdui-navigation-bar-item>-Komponente, um das Navigationselement in einen Link zu verwandeln. Sie können dann auch die Attribute download, target und rel verwenden.

Item 1

Item 2

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" href="https://www.mdui.org" target="_blank" value="item-1">Item 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
</mdui-navigation-bar>

Quellcode

Badge

In der <mdui-navigation-bar-item>-Komponente können Sie über den Slot badge ein Badge hinzufügen.

Item 1 99+

Item 2

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="item-1">
    Item 1
    <mdui-badge slot="badge">99+</mdui-badge>
  </mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
</mdui-navigation-bar>

Quellcode

Attribut	Property	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 Bar Item den Fokus erhält.
`blur`
Wird ausgelöst, wenn das Navigation Bar Item den Fokus verliert.

Name
Standard
Text.
`icon`
Icon.
`active-icon`
Icon für den aktiven Zustand.
`badge`
Badge.

Name
`container`
Container für das Navigationselement.
`indicator`
Indikator.
`badge`
Badge.
`icon`
Icon.
`active-icon`
Icon für den aktiven Zustand.
`label`
Text.

Name
`--shape-corner-indicator`
Der Eckradius des Indikators. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.

Attribut	Property	Typ	Standard
`hide`	`hide`	`boolean`	`false`
Gibt an, ob die Navigation Bar ausgeblendet ist.
`label-visibility`	`labelVisibility`	`'auto' \| 'selected' \| 'labeled' \| 'unlabeled'`	`'auto'`
Gibt an, wann der Text angezeigt wird. Mögliche Werte: `auto`: Sichtbar, wenn es 3 oder weniger Elemente gibt; andernfalls nur im ausgewählten Zustand sichtbar. `selected`: Nur im ausgewählten Zustand sichtbar. `labeled`: Immer sichtbar. `unlabeled`: Nie sichtbar.
`value`	`value`	`string`	-
Der Wert des ausgewählten `<mdui-navigation-bar-item>`.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Definiert das Scroll-Verhalten. Mögliche Werte: `hide`: Wird beim Scrollen ausgeblendet.
`scroll-target`	`scrollTarget`	`string \| HTMLElement \| JQ<HTMLElement>`	-
Das auf Scroll-Ereignisse zu überwachende Element. Akzeptiert einen CSS-Selektor, ein DOM-Element oder ein JQ-Objekt. Standardwert ist `window`.
`scroll-threshold`	`scrollThreshold`	`number`	-
Die Scroll-Distanz (in Pixeln), die erforderlich ist, um das Scroll-Verhalten auszulösen.
`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.
`show`
Wird ausgelöst, wenn die Navigation Bar beginnt, sich anzuzeigen. Kann mit `event.preventDefault()` verhindert werden.
`shown`
Wird ausgelöst, nachdem die Navigation Bar angezeigt wurde und die Animationen abgeschlossen sind.
`hide`
Wird ausgelöst, wenn die Navigation Bar beginnt, sich auszublenden. Kann mit `event.preventDefault()` verhindert werden.
`hidden`
Wird ausgelöst, nachdem die Navigation Bar ausgeblendet wurde und die Animationen abgeschlossen sind.

Name
Standard
Enthält `<mdui-navigation-bar-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

Nächste Seite

NavigationDrawer

NavigationBar

Verwendung

Beispiele

Anzeige der Beschriftung

Innerhalb eines angegebenen Containers

Beim Scrollen ausblenden

Symbol

Link

Badge

`mdui-navigation-bar-item` API

Eigenschaften

Methoden

Ereignisse

Slots

CSS Parts

CSS Custom Property

`mdui-navigation-bar` API

Eigenschaften

Ereignisse

Slots

CSS Custom Property