Боковая панель (Drawer)

Выдвижная панель навигации в mdui может выдвигаться с левой или правой стороны страницы. На одной странице может быть несколько панелей навигации.

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

Высота
- На мобильных устройствах и планшетах высота выдвижной панели навигации всегда составляет 100%.
- На компьютерах панель навигации по умолчанию не перекрывает панель приложения и находится на расстоянии высоты панели приложения от верхней части страницы. Добавление класса .mdui-drawer-full-height позволяет сделать высоту панели навигации равной 100%. В этом случае панель навигации может перекрывать панель приложения; вы можете добавить класс .mdui-appbar-inset к панели приложения, чтобы она не перекрывалась панелью навигации.
Цвет фона и тень
- На мобильных устройствах и планшетах панель навигации по умолчанию имеет белый фон и тень.
- На компьютерах панель навигации по умолчанию имеет прозрачный фон и не имеет тени. Добавление класса .mdui-color-[color] позволяет установить цвет фона панели навигации и добавить тень.
Состояние отображения
- На мобильных устройствах и планшетах панель навигации по умолчанию скрыта.
- На компьютерах панель навигации по умолчанию отображается.
- Добавление класса .mdui-drawer-open заставляет панель навигации отображаться по умолчанию на всех устройствах; добавление класса .mdui-drawer-close заставляет её быть скрытой по умолчанию на всех устройствах.
Маска
- На мобильных устройствах и планшетах при открытии панели навигации всегда отображается маска.
- На компьютерах при открытии панели навигации маска по умолчанию не отображается. Установите параметр overlay в значение true, чтобы отображать маску при открытии панели навигации. Если установлено отображение маски, следует добавить класс .mdui-drawer-close, чтобы панель навигации была скрыта по умолчанию.

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

(Если компонент создается динамически, необходимо вызвать mdui.mutation() для инициализации)
Вызов через JavaScript

Связанное чтение

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

Структура HTML

<!-- Класс mdui-drawer-body-left добавляет padding-left к body. Этот класс следует добавлять всегда, когда слева есть открытая по умолчанию панель навигации. -->
<!-- Класс mdui-drawer-body-right добавляет padding-right к body. Этот класс следует добавлять всегда, когда справа есть открытая по умолчанию панель навигации. -->
<body class="mdui-drawer-body-left mdui-drawer-body-right">

  <!-- Панель навигации по умолчанию находится слева -->
  <div class="mdui-drawer">
    ... drawer content ...
  </div>

  <!-- Чтобы панель навигации была справа, необходимо добавить класс mdui-drawer-right -->
  <div class="mdui-drawer mdui-drawer-right">
    ... drawer content ...
  </div>

</body>

Вызов через атрибуты

При таком способе не требуется написание JavaScript-кода. Достаточно добавить атрибут mdui-drawer="options" к управляющему элементу (например, кнопке). При вызове через пользовательский атрибут необходимо добавить дополнительный параметр target для указания управляемой панели навигации; его значением является CSS-селектор управляемой панели.

<body class="mdui-drawer-body-right">

  <button class="mdui-btn" mdui-drawer="{target: '#left-drawer'}">open left drawer</button>

  <div class="mdui-drawer" id="left-drawer">
    ... left drawer content ...
    <button class="mdui-btn" mdui-drawer-close>close</button>
  </div>

</body>

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

Атрибут	Описание
`mdui-drawer-close`	Клик по этому элементу вызовет событие `close.mdui.drawer` и закроет панель навигации.

Вызов через JavaScript

// selector — это CSS-селектор или DOM-элемент панели навигации
// options — это параметры конфигурации, см. список параметров ниже
var inst = new mdui.Drawer(selector, options);

Запуск

Параметр

Имя параметра	Тип	По умолчанию	Описание
`overlay`	`boolean`	`false`	Отображать ли маску при открытии панели навигации. Этот параметр действует только для устройств с диагональю экрана от средней и выше; на устройствах с очень маленьким и маленьким экраном маска отображается всегда.
`swipe`	`boolean`	`false`	Включить ли жесты смахивания.

Метод

Имя метода	Описание
`open`	Показать панель навигации.
`close`	Скрыть панель навигации.
`toggle`	Переключить состояние видимости панели навигации.
`getState`	Возвращает текущее состояние панели навигации. Всего существует четыре состояния (`opening`, `opened`, `closing`, `closed`).

Событие

Имя события	Описание	Цель	Параметры
`open.mdui.drawer`	Событие срабатывает, когда панель навигации начинает анимацию открытия.	`<div class="mdui-drawer"></div>`	`event._detail.inst`: экземпляр
`opened.mdui.drawer`	Событие срабатывает, когда панель навигации завершает анимацию открытия.
`close.mdui.drawer`	Событие срабатывает, когда панель навигации начинает анимацию закрытия.
`closed.mdui.drawer`	Событие срабатывает, когда панель навигации завершает анимацию закрытия.

Список CSS-классов

Имя класса	Описание
`.mdui-drawer`	Определяет выдвижную панель навигации.
`.mdui-drawer-right`	Выдвижная панель навигации в правой части страницы.
`.mdui-drawer-full-height`	Заставляет панель навигации занимать 100% высоты.
`.mdui-drawer-open`	Делает панель навигации видимой по умолчанию.
`.mdui-drawer-close`	Делает панель навигации скрытой по умолчанию.
`.mdui-drawer-body-left`	Добавляет `padding-left` к `body`.
`.mdui-drawer-body-right`	Добавляет `padding-right` к `body`.

Панель приложения

Нижняя навигация