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

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

Обычно внутри выдвижной панели навигации используется компонент <mdui-list> для добавления пунктов навигации.

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

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

import 'mdui/components/navigation-drawer.js';

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

import type { NavigationDrawer } from 'mdui/components/navigation-drawer.js';

Пример использования:

Закрыть выдвижную панель

Открыть выдвижную панель

<mdui-navigation-drawer close-on-overlay-click class="example-drawer">
  <mdui-button>Закрыть выдвижную панель</mdui-button>
</mdui-navigation-drawer>

<mdui-button>Открыть выдвижную панель</mdui-button>

<script>
  const navigationDrawer = document.querySelector(".example-drawer");
  const openButton = navigationDrawer.nextElementSibling;
  const closeButton = navigationDrawer.querySelector("mdui-button");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

Примечания:

Этот компонент по умолчанию использует позиционирование position: fixed.

Когда атрибут modal имеет значение false и ширина окна больше или равна --mdui-breakpoint-md, к body автоматически добавляется стиль padding-left или padding-right, чтобы содержимое страницы не перекрывалось компонентом.

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

Когда атрибут contained имеет значение true.
Когда компонент находится внутри <mdui-layout></mdui-layout>. В этом случае стили padding-left или padding-right не добавляются.

Примеры

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

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

Закрыть выдвижную панель

Открыть выдвижную панель

<div class="example-contained" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer contained>
    <mdui-button class="close">Закрыть выдвижную панель</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Открыть выдвижную панель</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-contained");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

Исходный код

Добавьте атрибут modal, чтобы при открытии выдвижной панели навигации отображался полупрозрачный фон. Обратите внимание, что при ширине окна или родительского элемента меньше --mdui-breakpoint-md этот параметр игнорируется, и фон отображается всегда.

Добавьте атрибут close-on-esc, чтобы панель закрывалась при нажатии клавиши ESC.

Добавьте атрибут close-on-overlay-click, чтобы панель закрывалась при клике на фон.

<div class="example-modal" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer modal close-on-esc close-on-overlay-click contained>
    <mdui-button class="close">Закрыть выдвижную панель</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Открыть выдвижную панель</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-modal");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

Исходный код

Расположение справа

Установите атрибут placement в значение right, чтобы выдвижная панель навигации отображалась справа.

Закрыть выдвижную панель

Открыть выдвижную панель

<div class="example-placement" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer placement="right" modal close-on-esc close-on-overlay-click contained>
    <mdui-button class="close">Закрыть выдвижную панель</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Открыть выдвижную панель</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-placement");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

Исходный код

API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`open`	`open`	`boolean`	`false`
Определяет, открыта ли выдвижная панель.
`modal`	`modal`	`boolean`	`false`
Определяет, нужно ли показывать затемнение при открытой выдвижной панели. На устройствах с узким экраном (ширина меньше `--mdui-breakpoint-md`) затемнение отображается всегда, независимо от этого параметра.
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
Определяет, нужно ли закрывать выдвижную панель по нажатию ESC, если отображается затемнение.
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
Определяет, нужно ли закрывать выдвижную панель при клике на затемнение.
`placement`	`placement`	`'left' \| 'right'`	`'left'`
Положение выдвижной панели. Возможные значения: `left` — слева `right` — справа
`contained`	`contained`	`boolean`	`false`
По умолчанию выдвижная панель позиционируется относительно элемента `body`. При задании этого свойства в `true` панель будет позиционироваться относительно своего родительского элемента. Примечание: При задании этого свойства необходимо вручную задать родительскому элементу стили `position: relative; overflow: hidden;`.
`order`	`order`	`number`	-
Порядок этого компонента в `<mdui-layout>` (по возрастанию). По умолчанию `0`.

События

Название
`open`
Возникает перед открытием выдвижной панели. Можно отменить открытие, вызвав `event.preventDefault()`.
`opened`
Срабатывает после завершения анимации открытия выдвижной панели.
`close`
Возникает перед закрытием выдвижной панели. Можно отменить закрытие, вызвав `event.preventDefault()`.
`closed`
Срабатывает после завершения анимации закрытия выдвижной панели.
`overlay-click`
Срабатывает при клике на затемнение.

Slots

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

CSS Parts

Название
`overlay`
Затемнение.
`panel`
Контейнер выдвижной панели.

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

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

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

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

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

NavigationRail Боковая панель навигации