BottomAppBarНижняя панель приложения

Нижняя панель приложения в основном используется для отображения навигационных элементов и других важных действий в нижней части страницы на мобильных устройствах.

Использование

При необходимости импортируйте компонент:

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

При необходимости импортируйте типы TypeScript:

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

Пример использования: (Примечание: style="position: relative" в примере добавлено для демонстрационных целей, при реальном использовании удалите этот стиль.)

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

Примечания:

Этот компонент по умолчанию использует позиционирование position: fixed и автоматически добавляет стиль padding-bottom к body, чтобы содержимое страницы не перекрывалось компонентом.

Однако в следующих двух случаях по умолчанию используется позиционирование position: absolute:

Когда указан атрибут scroll-target. В этом случае стиль padding-bottom добавляется к элементу scroll-target.
Когда компонент находится внутри <mdui-layout></mdui-layout>. В этом случае стиль padding-bottom не добавляется.

Примеры

В заданном контейнере

По умолчанию нижняя панель приложения отображается внизу страницы относительно текущего окна.

Если вы хотите разместить нижнюю панель приложения внутри указанного контейнера, укажите атрибут scroll-target, значением которого является CSS-селектор или DOM-элемент контейнера с прокручиваемым содержимым. В этом случае нижняя панель приложения будет отображаться относительно родительского элемента (вам нужно самостоятельно добавить родительскому элементу стили position: relative; overflow: hidden).

Content

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

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

Исходный код

Скрытие при прокрутке

Установите атрибут scroll-behavior в значение hide, чтобы скрывать нижнюю панель приложения при прокрутке страницы вниз и показывать при прокрутке вверх.

Используйте атрибут scroll-threshold, чтобы задать количество пикселей прокрутки, после которого начнется скрытие панели.

Content

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

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

Исходный код

Закрепление плавающей кнопки действия

Если нижняя панель приложения содержит плавающую кнопку действия, добавьте атрибут fab-detach, чтобы при прокрутке страницы и скрытии панели плавающая кнопка действия оставалась в правом нижнем углу страницы.

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

Исходный код

API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`hide`	`hide`	`boolean`	`false`
Определяет, скрыта ли панель.
`fab-detach`	`fabDetach`	`boolean`	`false`
Определяет, нужно ли отделять `<mdui-fab>` от панели при скрытии. Если `true`, FAB остаётся на странице при скрытии панели.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Поведение при прокрутке. Возможные значения: `hide` — скрывать при прокрутке.
`scroll-target`	`scrollTarget`	`string \| HTMLElement \| JQ<HTMLElement>`	-
Элемент, прокрутку которого нужно отслеживать. В качестве значения можно указать CSS-селектор, DOM-элемент или JQ-объект. По умолчанию отслеживается событие `scroll` объекта `window`.
`scroll-threshold`	`scrollThreshold`	`number`	-
Пороговое значение прокрутки в пикселях, при котором срабатывает поведение прокрутки.
`order`	`order`	`number`	-
Порядок этого компонента в `<mdui-layout>` (по возрастанию). По умолчанию `0`.

События

Название
`show`
Событие срабатывает в начале появления. Можно отменить появление, вызвав `event.preventDefault()`.
`shown`
Событие срабатывает после завершения анимации появления.
`hide`
Событие срабатывает в начале скрытия. Можно отменить скрытие, вызвав `event.preventDefault()`.
`hidden`
Событие срабатывает после завершения анимации скрытия.

Slots

Название
(по умолчанию)
Элементы внутри нижней панели приложения.

Пользовательские CSS-свойства

Название
`--shape-corner`
Размер скругления углов компонента. Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.
`--z-index`
Значение CSS `z-index` компонента.

Предыдущая глава

Badge Бейдж

Следующая глава

Button Кнопка