BottomAppBarDolny pasek aplikacji

Dolny pasek aplikacji wyświetla elementy nawigacyjne i inne ważne akcje na dole strony na urządzeniach mobilnych.

Sposób użycia

Zaimportuj komponent:

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

Zaimportuj typ TypeScript komponentu:

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

Przykład użycia: (Uwaga: style="position: relative" w przykładzie służy tylko do demonstracji; w produkcji usuń ten styl.)

<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>

Uwagi:

Ten komponent domyślnie używa pozycjonowania position: fixed i automatycznie dodaje styl padding-bottom do body, aby zapobiec zasłanianiu treści strony przez komponent.

Jednak w następujących dwóch przypadkach domyślnie używane jest pozycjonowanie position: absolute:

Gdy określony jest atrybut scroll-target, styl padding-bottom jest dodawany do elementu scroll-target.
Gdy komponent znajduje się wewnątrz komponentu <mdui-layout></mdui-layout>. Wtedy styl padding-bottom nie jest dodawany.

Przykłady

Umieszczenie w określonym kontenerze

Domyślnie dolny pasek aplikacji jest wyświetlany na dole strony względem bieżącego okna.

Jeśli chcesz umieścić dolny pasek aplikacji w określonym kontenerze, możesz określić atrybut scroll-target, którego wartością jest selektor CSS lub element DOM kontenera z przewijaną treścią. W tym przypadku dolny pasek aplikacji będzie wyświetlany względem elementu nadrzędnego (musisz samodzielnie dodać do elementu nadrzędnego style position: relative; overflow: hidden).

Treść

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

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

Źródło

Ukrywanie podczas przewijania

Ustawienie atrybutu scroll-behavior na hide spowoduje ukrycie dolnego paska aplikacji podczas przewijania strony w dół i pokazanie go podczas przewijania w górę.

Atrybut scroll-threshold ustawia, po przewinięciu ilu pikseli zaczyna się ukrywanie dolnego paska aplikacji.

Treść

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

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

Źródło

Stały pływający przycisk akcji

Jeśli dolny pasek aplikacji zawiera pływający przycisk akcji, możesz dodać atrybut fab-detach, aby podczas przewijania strony, gdy dolny pasek aplikacji jest ukryty, pływający przycisk akcji pozostał w prawym dolnym rogu strony.

<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>

Źródło

API

Właściwości

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`hide`	`hide`	`boolean`	`false`
Określa, czy pasek aplikacji jest ukryty.
`fab-detach`	`fabDetach`	`boolean`	`false`
Określa, czy odłączyć `<mdui-fab>` od dolnego paska aplikacji. Jeśli `true`, `<mdui-fab>` pozostaje na stronie, gdy pasek jest ukryty.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Zachowanie podczas przewijania. Dozwolone wartości: `hide`: Ukrywanie podczas przewijania
`scroll-target`	`scrollTarget`	`string \| HTMLElement \| JQ<HTMLElement>`	-
Element, na którym nasłuchiwane są zdarzenia przewijania. Może to być selektor CSS, element DOM lub obiekt JQ. Domyślnie nasłuchiwane są zdarzenia przewijania okna (`window`).
`scroll-threshold`	`scrollThreshold`	`number`	-
Odległość przewinięcia w `px` wymagana do aktywacji zachowania przewijania.
`order`	`order`	`number`	-
Kolejność tego komponentu w układzie `<mdui-layout>`, sortowana od najmniejszej do największej. Domyślnie `0`.

Zdarzenia

Nazwa
`show`
Wywoływane przed wyświetleniem. Można zapobiec wyświetleniu, wywołując `event.preventDefault()`
`shown`
Wywoływane po zakończeniu animacji wyświetlania
`hide`
Wywoływane przed ukryciem. Można zapobiec ukryciu, wywołując `event.preventDefault()`
`hidden`
Wywoływane po zakończeniu animacji ukrywania

Slots

Nazwa
(domyślny)
Elementy wewnątrz dolnego paska aplikacji

Właściwości niestandardowe CSS

Nazwa
`--shape-corner`
Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
`--z-index`
Wartość CSS `z-index` komponentu

Poprzedni rozdział

Badge Badge

Następny rozdział

Button Przycisk