ДокументацияРазделы, компоненты, системы и их подразделы
Drawer
Выдвижная боковая панель
Adaptive panel
Drawer добавляет контекст, не заменяя основной экран
Используйте панель для фильтров, деталей объекта, дополнительных настроек и вторичных действий. Критическое подтверждение или обязательный шаг лучше перенести в Modal.
Панель с заголовком, содержимым и действиями
Откройте пример: ядро создаст backdrop, заблокирует прокрутку страницы, перенесёт фокус внутрь и вернёт его на триггер после закрытия.
HTMLПанель справа
<button
data-ox-toggle="drawer"
data-ox-target="#project-details"
aria-controls="project-details"
>
Открыть детали
</button>
<aside
class="ox-drawer"
id="project-details"
data-ox-ui="drawer"
data-ox-placement="right"
aria-labelledby="project-details-title"
>
<header class="ox-drawer-header">
<h2 class="ox-drawer-title" id="project-details-title">Проект Atlas</h2>
<button class="ox-drawer-close" data-ox-dismiss="drawer"></button>
</header>
<div class="ox-drawer-body">...</div>
<footer class="ox-drawer-footer">...</footer>
</aside>Четыре направления
Right — основной вариант для деталей и настроек, Left подходит для навигационного контекста, Bottom — для мобильного сценария. Top используйте только когда связь с верхней областью очевидна.
rightlefttopbottomПараметры поведения
Все значения можно задать data-атрибутами на панели или через params при программной инициализации.
data-ox-placement="right"right, left, top или bottom; значение по умолчанию right.data-ox-backdrop="true"Создаёт общую системную подложку.data-ox-close-on-backdrop="true"Разрешает закрытие кликом по подложке.data-ox-keyboard="true"Escape закрывает верхнюю открытую панель.data-ox-autofocus="true"Переносит фокус на autofocus, первый доступный элемент или панель.data-ox-restore-focus="true"После закрытия возвращает фокус на триггер.data-ox-scroll-lock="true"Блокирует прокрутку фонового документа.data-ox-modal="false"По умолчанию Drawer не получает aria-modal.data-ox-focus-trap="false"Удержание фокуса включайте вместе с modal для блокирующего сценария.data-ox-hash="false"При true синхронизирует открытие с #id панели.data-ox-motion-duration="240"Длительность появления и скрытия в миллисекундах.
API, события и доступность
Ядро назначает role="dialog", синхронизирует aria-hidden и обслуживает кнопку закрытия. Доступное имя задаёт приложение через aria-labelledby.
JavaScriptМодальный Drawer
import { Drawer } from 'okaux/js/app.js';
const element = document.querySelector('#project-settings');
const drawer = Drawer.getOrCreateInstance({
element,
params: {
modal: true,
focusTrap: true,
restoreFocus: true,
},
});
drawer.show(trigger);
drawer.hide();
drawer.toggle(trigger);drawer:showПеред открытием; содержит relatedTarget и params.drawer:shownПосле завершения появления.drawer:hideПеред закрытием; событие можно отменить.drawer:hiddenПосле завершения скрытия.aria-labelledbyСвязывает dialog с видимым заголовком панели.aria-modal="true"Только при modal: true; тогда также включите focusTrap.data-ox-dismiss="drawer"Кнопка без содержимого автоматически получает close-иконку и aria-label.Обычная .rowДля сетки внутри body не используйте row-bleed: он может создать горизонтальный overflow.