BottomAppBar

Die Bottom App Bar zeigt auf Mobilgeräten Navigationselemente und wichtige Aktionen am unteren Rand an.

Verwendung

Importieren Sie die Komponente nach Bedarf:

import 'mdui/components/bottom-app-bar.js';

Importieren Sie den TypeScript-Typ der Komponente nach Bedarf:

import type { BottomAppBar } from 'mdui/components/bottom-app-bar.js';

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

<mdui-bottom-app-bar style="position: relative;">
  <mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
  <mdui-button-icon icon="edit--outlined"></mdui-button-icon>
  <mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
  <mdui-button-icon icon="image--outlined"></mdui-button-icon>
  <div style="flex-grow: 1"></div>
  <mdui-fab icon="add"></mdui-fab>
</mdui-bottom-app-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 sie sich innerhalb von <mdui-layout></mdui-layout> befindet. In diesem Fall wird kein padding-bottom hinzugefügt.

Beispiele

Innerhalb eines angegebenen Containers

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

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

Inhalt

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

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

Quellcode

Beim Scrollen ausblenden

Wenn Sie das Attribut scroll-behavior auf hide setzen, wird die Bottom App Bar beim Scrollen nach unten ausgeblendet und beim Scrollen nach oben wieder eingeblendet.

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

Inhalt

<div style="position: relative;overflow: hidden">
  <mdui-bottom-app-bar
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-scroll-behavior"
  >Inhalt</mdui-bottom-app-bar>

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

Quellcode

Fixierte Floating Action Button

Wenn die Bottom App Bar eine Floating Action Button enthält, können Sie das Attribut fab-detach hinzufügen, sodass der Floating Action Button auch beim Scrollen und Ausblenden der Bottom App Bar in der unteren rechten Ecke der Seite verbleibt.

<div style="position: relative;overflow: hidden">
  <mdui-bottom-app-bar
    fab-detach
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-fab-detach"
  >
    <mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
    <mdui-button-icon icon="edit--outlined"></mdui-button-icon>
    <mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
    <mdui-button-icon icon="image--outlined"></mdui-button-icon>
    <div style="flex-grow: 1"></div>
    <mdui-fab icon="add"></mdui-fab>
  </mdui-bottom-app-bar>

  <div class="example-fab-detach" style="height: 200px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

Quellcode

API

Eigenschaften

Attribut	Property	Typ	Standard
`hide`	`hide`	`boolean`	`false`
Gibt an, ob die Bottom App Bar ausgeblendet ist.
`fab-detach`	`fabDetach`	`boolean`	`false`
Wenn gesetzt, wird der `<mdui-fab>` von der Bottom App Bar gelöst. Der `<mdui-fab>` bleibt auf der Seite, auch nachdem die App-Leiste ausgeblendet wurde.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Gibt das Scroll-Verhalten an. 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`.

Ereignisse

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

Slots

Name
Standard
Elemente innerhalb der Bottom App Bar.

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

Badge

Nächste Seite

Button