TopAppBarВерхняя панель приложения

Верхняя панель приложения используется для отображения ключевой информации и связанных действий в верхней части страницы, обеспечивая четкую навигацию и удобный доступ к функциям.

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

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

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

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

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

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

Title

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

Примечания:

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

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

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

Примеры

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

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

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

Title

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar scroll-target=".example-scroll-target">
    <mdui-top-app-bar-title>Title</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>

Исходный код

Форма

Используйте атрибут variant на компоненте <mdui-top-app-bar> для установки формы панели.

Title

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

Исходный код

Поведение при прокрутке страницы

Установите атрибут scroll-behavior на компоненте <mdui-top-app-bar>, чтобы определить поведение панели при прокрутке страницы. Можно указать несколько действий, разделив их пробелами.

Доступные действия:

hide: Панель скрывается при прокрутке вниз и показывается при прокрутке вверх.
shrink: Действует только когда variant имеет значение medium или large. Панель сжимается при прокрутке вниз и разворачивается при прокрутке вверх.
elevate: При прокрутке вниз добавляется тень; при возврате к верху тень убирается.

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

Пример: скрытие при прокрутке

Title

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

Исходный код

Пример: добавление тени при прокрутке

Title

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

Исходный код

Пример: сжатие при прокрутке

Title

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

Исходный код

Пример: сжатие и добавление тени при прокрутке

Title

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

Исходный код

Текст в развернутом состоянии

Для панели с variant равным medium или large и scroll-behavior равным shrink, вы можете установить текст для развернутого состояния с помощью слота label-large внутри компонента <mdui-top-app-bar-title>.

Это заголовок в свернутом состоянии Это заголовок в развернутом состоянии

<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>
      Это заголовок в свернутом состоянии
      <span slot="label-large">Это заголовок в развернутом состоянии</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>

Исходный код

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

Slots

Название
(по умолчанию)
Текст заголовка верхней панели приложения.
`label-large`
Текст заголовка в развёрнутом состоянии (для панелей medium и large).

CSS Parts

Название
`label`
Текст заголовка.
`label-large`
Текст заголовка в развёрнутом состоянии.

`mdui-top-app-bar` API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`variant`	`variant`	`'center-aligned' \| 'small' \| 'medium' \| 'large'`	`'small'`
Форма верхней панели приложения. По умолчанию `small`. Возможные значения: `center-aligned` — маленькая панель, заголовок по центру `small` — маленькая панель `medium` — средняя панель `large` — большая панель
`hide`	`hide`	`boolean`	`false`
Определяет, скрыт ли компонент.
`shrink`	`shrink`	`boolean`	`false`
Определяет, должен ли компонент сжиматься до стиля `variant="small"`. Действует только при `variant="medium"` или `variant="large"`.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Поведение при прокрутке. Можно указать несколько значений через пробел. Возможные значения: `hide` — скрывать при прокрутке `shrink` — для средних и больших панелей, сжиматься до стиля маленькой панели при прокрутке `elevate` — добавлять тень при прокрутке
`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` компонента.

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

Tooltip Тултип

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

Библиотека jq