TopAppBar

Die Top App Bar zeigt oben auf der Seite wichtige Informationen und zugehörige Aktionen an und bietet eine klare Navigation sowie schnellen Zugriff auf Funktionen.

Verwendung

Importieren Sie die Komponenten nach Bedarf:

import 'mdui/components/top-app-bar.js';
import 'mdui/components/top-app-bar-title.js';

Importieren Sie die TypeScript-Typen der Komponenten nach Bedarf:

import type { TopAppBar } from 'mdui/components/top-app-bar.js';
import type { TopAppBarTitle } from 'mdui/components/top-app-bar-title.js';

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

Titel

<mdui-top-app-bar style="position: relative;">
  <mdui-button-icon icon="menu"></mdui-button-icon>
  <mdui-top-app-bar-title>Titel</mdui-top-app-bar-title>
  <div style="flex-grow: 1"></div>
  <mdui-button-icon icon="more_vert"></mdui-button-icon>
</mdui-top-app-bar>

Wichtige Hinweise:

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

Beispiele

Innerhalb eines angegebenen Containers

Standardmäßig wird die Top App Bar relativ zum aktuellen Fenster oben auf der Seite angezeigt.

Wenn Sie die Top App Bar in einem bestimmten Container platzieren möchten, geben Sie auf der <mdui-top-app-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 Top App Bar relativ zum übergeordneten Element angezeigt (Sie müssen dem übergeordneten Element selbst die Stile position: relative; overflow: hidden hinzufügen).

Titel

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar scroll-target=".example-scroll-target">
    <mdui-top-app-bar-title>Titel</mdui-top-app-bar-title>
  </mdui-top-app-bar>

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

Quellcode

Form

Sie können die Form der Top App Bar mit dem Attribut variant auf der <mdui-top-app-bar>-Komponente festlegen.

Titel

center-aligned

small

medium

large

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar variant="small" scroll-target=".example-variant" class="example-variant-bar">
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>Titel</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

  <div class="example-variant" style="height: 160px;overflow: auto;">
    <div style="height: 1000px">
      <mdui-segmented-button-group selects="single" value="small">
        <mdui-segmented-button value="center-aligned">center-aligned</mdui-segmented-button>
        <mdui-segmented-button value="small">small</mdui-segmented-button>
        <mdui-segmented-button value="medium">medium</mdui-segmented-button>
        <mdui-segmented-button value="large">large</mdui-segmented-button>
      </mdui-segmented-button-group>
    </div>
  </div>
</div>

<script>
  const topAppBar = document.querySelector(".example-variant-bar");
  const segmentedButtonGroup = document.querySelector(".example-variant");

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

Quellcode

Scrollverhalten

Setzen Sie das Attribut scroll-behavior auf der <mdui-top-app-bar>-Komponente, um das Scrollverhalten der Top App Bar zu definieren. Sie können mehrere Verhaltensweisen gleichzeitig mit Leerzeichen getrennt angeben.

Das Scrollverhalten umfasst:

hide: Die Top App Bar wird beim Scrollen nach unten ausgeblendet und beim Scrollen nach oben wieder eingeblendet.
shrink: Nur wirksam, wenn das Attribut variant auf medium oder large gesetzt ist. Die Top App Bar wird beim Scrollen nach unten erweitert und beim Scrollen nach oben eingezogen.
elevate: Beim Scrollen nach unten wird ein Schatten auf der Top App Bar hinzugefügt; wenn Sie zum Anfang der Seite zurückrollen, wird der Schatten entfernt.

Verwenden Sie das Attribut scroll-threshold, um festzulegen, wie viele Pixel gescrollt werden müssen, bevor das Scrollverhalten der Top App Bar ausgelöst wird. (Hinweis: Für eine schnelle Reaktion sollten Sie bei Verwendung des Scrollverhaltens elevate das Attribut scroll-threshold nicht mehr setzen.)

Beispiel: Beim Scrollen ausblenden

Titel

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-scroll-behavior-hide"
  >
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>Titel</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

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

Quellcode

Beispiel: Beim Scrollen Schatten hinzufügen

Titel

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar
    scroll-behavior="elevate"
    scroll-target=".example-scroll-behavior-elevate"
  >
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>Titel</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

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

Quellcode

Beispiel: Beim Scrollen einziehen

Titel

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar
    variant="medium"
    scroll-behavior="shrink"
    scroll-threshold="30"
    scroll-target=".example-scroll-behavior-shrink"
  >
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>Titel</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

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

Quellcode

Beispiel: Beim Scrollen einziehen und Schatten hinzufügen

Titel

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar
    variant="medium"
    scroll-behavior="shrink elevate"
    scroll-target=".example-scroll-behavior-shrink-elevate"
  >
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>Titel</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

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

Quellcode

Text im erweiterten Zustand

Für die Top App Bar mit variant medium oder large und scroll-behavior shrink können Sie den Slot label-large in der <mdui-top-app-bar-title>-Komponente verwenden, um den Text für den erweiterten Zustand festzulegen.

Dies ist der Titel für den eingezogenen Zustand Dies ist der Titel für den erweiterten Zustand

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar
    variant="medium"
    scroll-behavior="shrink elevate"
    scroll-target=".example-label-large-slot"
  >
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>
      Dies ist der Titel für den eingezogenen Zustand
      <span slot="label-large">Dies ist der Titel für den erweiterten Zustand</span>
    </mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

  <div class="example-label-large-slot" style="height: 160px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

Quellcode

`mdui-top-app-bar-title` API

Slots

Name
Standard
Der Titeltext der Top App Bar.
`label-large`
Der Titeltext, wenn die Top App Bar im erweiterten Zustand ist.

CSS Parts

Name
`label`
Der Titeltext.
`label-large`
Der Titeltext, wenn die Top App Bar im erweiterten Zustand ist.

`mdui-top-app-bar` API

Eigenschaften

Attribut	Property	Typ	Standard
`variant`	`variant`	`'center-aligned' \| 'small' \| 'medium' \| 'large'`	`'small'`
Definiert die Top App Bar-Variante. Standard ist `small`. Mögliche Werte: `center-aligned`: Kleine App-Leiste mit zentriertem Titel. `small`: Kleine App-Leiste. `medium`: Mittelgroße App-Leiste. `large`: Große App-Leiste.
`hide`	`hide`	`boolean`	`false`
Gibt an, ob die Top App Bar ausgeblendet ist.
`shrink`	`shrink`	`boolean`	`false`
Schrumpft die Top App Bar auf die `small`-Variante. Gilt nur für `medium`- oder `large`-Varianten.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Definiert das Scroll-Verhalten. Mehrere durch Leerzeichen getrennte Werte werden akzeptiert. Mögliche Werte: `hide`: Wird beim Scrollen ausgeblendet. `shrink`: Schrumpft beim Scrollen (für mittlere bis große App-Leisten). `elevate`: Erhöht die Höhe beim Scrollen.
`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`.

Ereignisse

Name
`show`
Wird ausgelöst, wenn die Top App Bar beginnt, sich anzuzeigen. Kann mit `event.preventDefault()` verhindert werden.
`shown`
Wird ausgelöst, nachdem die Top App Bar angezeigt wurde und die Animationen abgeschlossen sind.
`hide`
Wird ausgelöst, wenn die Top App Bar beginnt, sich auszublenden. Kann mit `event.preventDefault()` verhindert werden.
`hidden`
Wird ausgelöst, nachdem die Top App Bar ausgeblendet wurde und die Animationen abgeschlossen sind.

Slots

Name
Standard
Elemente, die in der Top App Bar enthalten sind.

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

Tooltip

Nächste Seite

jq-Bibliothek