BottomAppBarSpodní aplikační lišta

Spodní aplikační lišta slouží hlavně k zobrazení navigačních položek a dalších důležitých akcí dole na stránce na mobilních zařízeních.

Způsob použití

Importujte komponentu podle potřeby:

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

Importujte TypeScript typy komponenty podle potřeby:

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

Příklad použití: (Poznámka: style="position: relative" v příkladu je jen pro ukázku; v ostrém použití tento styl odstraňte.)

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

Upozornění:

Ve výchozím nastavení používá position: fixed a automaticky přidá padding-bottom na body, aby nedošlo k zakrytí obsahu stránky touto komponentou.

V těchto dvou případech se však používá position: absolute:

Když je zadán atribut scroll-target. Pak se padding-bottom přidá na prvek scroll-target.
Když se nachází uvnitř komponenty <mdui-layout></mdui-layout>. Pak se padding-bottom nepřidává.

Příklady

Umístění v určeném kontejneru

Ve výchozím nastavení se spodní aplikační lišta zobrazuje dole na stránce.

Pokud chcete umístit spodní aplikační lištu do určeného kontejneru, můžete zadat atribut scroll-target, jehož hodnota je CSS selektor nebo DOM prvek kontejneru s rolovatelným obsahem. V takovém případě se spodní aplikační lišta umístí relativně k nadřazenému prvku; styl position: relative; overflow: hidden je nutné na nadřazený prvek přidat ručně.

Obsah

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

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

Zdrojový kód

Skrytí při rolování

Nastavením atributu scroll-behavior na hide můžete skrýt spodní aplikační lištu při rolování stránky dolů a zobrazit ji při rolování nahoru.

Pomocí atributu scroll-threshold můžete nastavit, po kolika pixelech rolování se má spodní aplikační lišta začít skrývat.

Obsah

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

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

Zdrojový kód

Fixní plovoucí akční tlačítko

Pokud spodní aplikační lišta obsahuje plovoucí akční tlačítko, můžete přidat atribut fab-detach, aby při rolování stránky, když se spodní aplikační lišta skryje, plovoucí akční tlačítko zůstalo ve spodním pravém rohu stránky.

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

Zdrojový kód

API

Vlastnosti

Atribut	Vlastnost	Typ	Výchozí
`hide`	`hide`	`boolean`	`false`
Určuje, zda je lišta skrytá.
`fab-detach`	`fabDetach`	`boolean`	`false`
Určuje, zda se má komponent `<mdui-fab>` ve spodní aplikační liště od lišty oddělit. Pokud je `true`, po skrytí lišty zůstane `<mdui-fab>` na stránce.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Chování při posouvání. Možné hodnoty: `hide`: Při posouvání se lišta skryje.
`scroll-target`	`scrollTarget`	`string \| HTMLElement \| JQ<HTMLElement>`	-
Prvek, na kterém se sledují události posouvání. Hodnotou může být CSS selektor, DOM element nebo jQuery objekt. Výchozí hodnotou je `window` (okno).
`scroll-threshold`	`scrollThreshold`	`number`	-
Vzdálenost v pixelech, o kterou musí být obsah posunut, aby se chování aktivovalo.
`order`	`order`	`number`	-
Pořadí této komponenty v rámci rozvržení `<mdui-layout>`. Řadí se vzestupně (nižší hodnoty mají přednost). Výchozí hodnota je `0`.

Události

Název
`show`
Spustí se na začátku zobrazování. Zobrazení lze zabránit voláním `event.preventDefault()`.
`shown`
Spustí se po dokončení animace zobrazení.
`hide`
Spustí se na začátku skrývání. Skrytí lze zabránit voláním `event.preventDefault()`.
`hidden`
Spustí se po dokončení animace skrytí.

Slots

Název
(výchozí)
Prvky uvnitř spodní aplikační lišty.

CSS Custom Properties

Název
`--shape-corner`
Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
`--z-index`
Hodnota CSS `z-index` komponenty.

Předchozí kapitola

Badge Odznak

Další kapitola

Button Tlačítko