NavigationBarПанель навигации

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

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

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

import 'mdui/components/navigation-bar.js';
import 'mdui/components/navigation-bar-item.js';

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

import type { NavigationBar } from 'mdui/components/navigation-bar.js';
import type { NavigationBarItem } from 'mdui/components/navigation-bar-item.js';

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

Item 1

Item 2

Item 3

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
</mdui-navigation-bar>

Примечания:

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

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

Примеры

Отображение текстовых меток

Текстовые метки на панели навигации по умолчанию отображаются всегда, если количество элементов навигации не превышает 3; если элементов больше 3, текст отображается только для выбранного элемента.

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Item 4

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
</mdui-navigation-bar>

<br/>

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="directions_railway" value="item-3">Item 3</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-4">Item 4</mdui-navigation-bar-item>
</mdui-navigation-bar>

Исходный код

Вы можете настроить отображение текстовых меток с помощью атрибута label-visibility у компонента <mdui-navigation-bar>. Возможные значения:

selected: текст отображается только для выбранного элемента
labeled: текст отображается всегда
unlabeled: текст не отображается никогда

Item 1

Item 2

Item 3

selected

labeled

unlabeled

<mdui-navigation-bar value="item-1" label-visibility="selected" style="position: relative" class="example-label">
  <mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
</mdui-navigation-bar>

<mdui-segmented-button-group value="selected" selects="single" style="margin-top: 16px">
  <mdui-segmented-button value="selected">selected</mdui-segmented-button>
  <mdui-segmented-button value="labeled">labeled</mdui-segmented-button>
  <mdui-segmented-button value="unlabeled">unlabeled</mdui-segmented-button>
</mdui-segmented-button-group>

<script>
  const navigationBar = document.querySelector(".example-label");
  const segmentedButtonGroup = navigationBar.nextElementSibling;

  segmentedButtonGroup.addEventListener("change", (event) => {
    navigationBar.labelVisibility = event.target.value;
  });
</script>

Исходный код

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

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

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

Item 1

Item 2

Item 3

Содержимое страницы

<div style="position: relative;overflow: hidden">
  <mdui-navigation-bar scroll-target=".example-scroll-target" value="item-1">
    <mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
  </mdui-navigation-bar>

  <div class="example-scroll-target" style="height: 160px;overflow: auto;">
    <div style="height: 1000px">Содержимое страницы</div>
  </div>
</div>

Исходный код

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

Установите атрибут scroll-behavior у компонента <mdui-navigation-bar> в значение hide, чтобы панель навигации скрывалась при прокрутке страницы вниз и показывалась при прокрутке вверх.

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

Item 1

Item 2

Item 3

Содержимое страницы

<div style="position: relative;overflow: hidden">
  <mdui-navigation-bar
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-scroll-behavior"
    value="item-1"
  >
    <mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
  </mdui-navigation-bar>

  <div class="example-scroll-behavior" style="height: 160px;overflow: auto;">
    <div style="height: 1000px">Содержимое страницы</div>
  </div>
</div>

Исходный код

Иконка

У компонента <mdui-navigation-bar-item> атрибут icon задает иконку для неактивного состояния, а атрибут active-icon — для активного состояния. Также можно использовать слоты icon и active-icon для указания элементов иконок.

Item 1

Item 2

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item
    icon="place--outlined"
    active-icon="place"
    value="item-1"
  >Item 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item value="item-2">
    Item 2
    <mdui-icon slot="icon" name="people--outlined"></mdui-icon>
    <mdui-icon slot="active-icon" name="people"></mdui-icon>
  </mdui-navigation-bar-item>
</mdui-navigation-bar>

Исходный код

Ссылка

Установите атрибут href у компонента <mdui-navigation-bar-item>, чтобы превратить элемент навигации в ссылку. При этом также можно использовать связанные с ссылками атрибуты: download, target, rel.

Item 1

Item 2

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" href="https://www.mdui.org" target="_blank" value="item-1">Item 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
</mdui-navigation-bar>

Исходный код

Бейдж

В компоненте <mdui-navigation-bar-item> можно добавить бейдж через слот badge.

Item 1 99+

Item 2

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="item-1">
    Item 1
    <mdui-badge slot="badge">99+</mdui-badge>
  </mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
</mdui-navigation-bar>

Исходный код

Атрибут	Свойство	Тип	По умолчанию
`icon`	`icon`	`string`	-
Имя иконки Material Icons в неактивном состоянии. Можно задать через `slot="icon"`.
`active-icon`	`activeIcon`	`string`	-
Имя иконки Material Icons в активном состоянии. Можно задать через `slot="active-icon"`.
`value`	`value`	`string`	-
Значение элемента панели навигации.
`href`	`href`	`string`	-
Целевой URL ссылки. Если задано это свойство, компонент будет отображаться как элемент `<a>` и можно использовать свойства, связанные со ссылками.
`download`	`download`	`string`	-
Имя файла для скачивания при переходе по ссылке. Примечание: Это свойство действует только при заданном свойстве `href`.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Определяет, где будет открыта ссылка. Возможные значения: `_blank` — открывает ссылку в новом окне `_parent` — открывает ссылку в родительском фрейме `_self` — открывает ссылку в текущем фрейме (по умолчанию) `_top` — открывает ссылку во всём окне Примечание: Это свойство действует только при заданном свойстве `href`.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Определяет тип связи между текущим документом и связанным документом. Возможные значения: `alternate` — альтернативная версия текущего документа `author` — автор текущего документа или статьи `bookmark` — постоянная ссылка на ближайший родительский раздел `external` — ссылка ведёт на другой сайт `help` — ссылка на соответствующую справочную документацию `license` — основное содержимое текущего документа лицензируется по лицензии связанного файла `me` — текущий документ представляет владельца связанного контента `next` — текущий документ является частью серии, а цитируемый документ — следующим в серии `nofollow` — не передавать ссылке вес `noreferrer` — не передаёт заголовок `Referer`. Эффект аналогичен `noopener` `opener` — если гиперссылка создаёт контекст просмотра верхнего уровня (то есть значение атрибута `target` равно `_blank`), создаётся вспомогательный контекст просмотра `prev` — текущий документ является частью серии, а цитируемый документ — предыдущим в серии `search` — содержит ссылку на ресурс, который можно использовать для поиска по текущему файлу и связанным с ним страницам `tag` — указывает тег, относящийся к текущему документу (определяется по указанному адресу) Примечание: Доступно только при заданном свойстве `href`.
`autofocus`	`autofocus`	`boolean`	`false`
Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
`tabindex`	`tabIndex`	`number`	-
Порядок перехода к элементу при нажатии клавиши Tab.

Название	Параметры	Возвращаемое значение
`click`		`void`
Имитирует щелчок мыши по элементу.
`focus`	`options: FocusOptions` (Опционально)	`void`
Устанавливает фокус на текущий элемент. В качестве аргумента можно передать объект со свойством: `preventScroll`: по умолчанию после получения фокуса страница прокручивается, чтобы элемент появился в области видимости. Чтобы этого избежать, задайте для этого свойства значение `true`.
`blur`		`void`
Убирает фокус с текущего элемента.

Название
`focus`
Срабатывает при получении фокуса.
`blur`
Срабатывает при потере фокуса.

Название
(по умолчанию)
Текст элемента панели навигации.
`icon`
Иконка.
`active-icon`
Элемент иконки в активном состоянии.
`badge`
Бейдж.

Название
`container`
Контейнер элемента панели навигации.
`indicator`
Индикатор.
`badge`
Бейдж.
`icon`
Иконка.
`active-icon`
Иконка в активном состоянии.
`label`
Текст элемента панели навигации.

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

Атрибут	Свойство	Тип	По умолчанию
`hide`	`hide`	`boolean`	`false`
Определяет, скрыта ли панель.
`label-visibility`	`labelVisibility`	`'auto' \| 'selected' \| 'labeled' \| 'unlabeled'`	`'auto'`
Видимость текста. Возможные значения: `auto` — при количестве пунктов ≤3 текст отображается всегда; при >3 текст отображается только для выбранного пункта `selected` — текст отображается только для выбранного пункта `labeled` — текст отображается всегда `unlabeled` — текст никогда не отображается
`value`	`value`	`string`	-
Значение текущего выбранного `<mdui-navigation-bar-item>`.
`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`.

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

Название
(по умолчанию)
Компоненты `<mdui-navigation-bar-item>`.

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

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

Menu Меню

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

NavigationDrawer Выдвижная панель навигации

NavigationBarПанель навигации

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

Примеры

Отображение текстовых меток

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

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

Иконка

Ссылка

Бейдж

`mdui-navigation-bar-item` API

Свойства

Методы

События

Slots

CSS Parts

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

`mdui-navigation-bar` API

Свойства

События

Slots

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