ДокументацияРазделы, компоненты, системы и их подразделы
Dropdown
Контекстный выпадающий контент
Overlay
Dropdown показывает компактный контекст рядом с триггером
Используйте панель для небольшого меню, переключения режима или короткого набора действий. Сложную задачу с формой и длинным содержимым лучше перенести в Drawer или Modal.
Меню действий
Нажмите на триггер. Панель автоматически выберет доступную сторону, закроется по внешнему клику или Escape и вернёт фокус на кнопку.
HTMLМеню действий
<div class="ox-dropdown">
<button
type="button"
data-ox-ui="dropdown"
data-ox-target="#project-actions"
aria-controls="project-actions"
aria-haspopup="menu"
>
Действия
</button>
<div class="ox-dropdown-content" id="project-actions">
<div class="ox-dropdown-container">
<ul class="ox-dropdown-menu" role="menu">
<li role="none">
<button class="ox-dropdown-link" role="menuitem">Редактировать</button>
</li>
</ul>
</div>
</div>
</div>Произвольный компактный контент
Container задаёт поверхность, stack — вертикальный ритм. Содержимое остаётся коротким и не требует отдельного пользовательского сценария.
Проект Atlas
Активен
.ox-dropdown-container
.ox-dropdown-stack
data-ox-placement="bottom-end"
Параметры поведения
Параметры задаются на триггере. Позиционирование использует fallback и ограничивает панель границами viewport.
Открытие по hover
data-ox-hover="true"
HTMLДекларативные параметры
<button
data-ox-ui="dropdown"
data-ox-target="#dropdown-panel"
data-ox-hover="true"
data-ox-keyboard="true"
data-ox-rotate-indicator="true"
data-ox-placement="bottom-end"
data-ox-offset='[0, 12]'
>
Открыть
</button>data-ox-placement="bottom-start"Строка · значение по умолчанию. Доступны top, bottom, left, right и варианты start/end.data-ox-offset='[0, 8]'JSON-массив · значение по умолчанию: горизонтальный skidding и расстояние от триггера.data-ox-hover="false"Boolean · по умолчанию false. При true добавляет открытие наведением.data-ox-keyboard="true"Boolean · по умолчанию true. Enter, Space, ArrowDown и ArrowUp открывают панель.data-ox-rotate-indicator="true"Boolean · по умолчанию true. Поворачивает chevron-down или явно отмеченный индикатор.data-ox-dropdown-indicatorПомечает любую другую иконку как индикатор состояния Dropdown.data-ox-dropdown-planeСвязывает соседние dropdown для плавного перехода между панелями.Внешний click + EscapeЗакрывают открытую панель; Escape возвращает фокус триггеру.
Программный API и события
Публичный экземпляр поддерживает show, hide и toggle. События до открытия и закрытия можно отменить.
JavaScriptУправление Dropdown
import { Dropdown } from 'okaux/js/app.js';
const trigger = document.querySelector('[data-ox-ui="dropdown"]');
const dropdown = Dropdown.getOrCreateInstance(trigger);
dropdown.show();
dropdown.hide();
dropdown.toggle();dropdown:showПеред открытием; событие можно отменить.dropdown:shownПосле завершения анимации открытия.dropdown:hideПеред закрытием; событие можно отменить.dropdown:hiddenПосле завершения анимации закрытия.
Роль зависит от содержимого
Dropdown управляет видимостью и возвращением фокуса, но семантика панели и навигация между её пунктами остаются ответственностью приложения.
aria-haspopupСообщает тип содержимого: menu, listbox или dialog.aria-controlsСвязывает кнопку с id выпадающей панели.aria-expandedЯдро автоматически синхронизирует состояние триггера.Навигация пунктовПриложение реализует стрелки, Home/End и управление фокусом внутри menu/listbox.Выбор пунктаПриложение выполняет действие и при необходимости вызывает hide().EscapeЯдро закрывает панель и возвращает фокус на триггер.