VGDropdown
Основы
Структура Dropdown, открытие по клику и доступное состояние.
Что делает VGDropdown
Модуль открывает содержимое рядом с управляющим элементом, рассчитывает свободное место и синхронизирует состояние кнопки.
Режим auto меняет сторону, если меню не помещается.
Стрелки открывают меню, Escape закрывает и возвращает фокус.
При открытии следующего Dropdown предыдущий закрывается.
Базовое меню
Кнопка и панель находятся внутри .vg-dropdown. Если data-vg-target не указан, используется ближайшая .vg-dropdown-content.
Откройте меню и кликните за его пределами, чтобы закрыть.
Поведение
Автоматическое размещение, hover-режим и загрузка содержимого.
Размещение
Для большинства интерфейсов используйте auto. Явную сторону задавайте только там, где компоновка заранее известна.
Фактическая сторона записывается в data-vg-placement на панели Dropdown.
Открытие по наведению
data-hover включает hover на устройствах с мышью. На мобильном устройстве Dropdown продолжает работать по клику.
Клик остаётся запасным способом управления.
AJAX-контент
Запрос выполняется при первом открытии. data-ajax-once сохраняет результат для следующих открытий.
Содержимое не входит в исходный HTML страницы.
Ожидание запроса…
Код для проекта
Готовая разметка, ручное API, CSS-переменные и справочник событий.
HTML и Data API
Стандартный Dropdown не требует пользовательского JavaScript. Панель можно связать явно через data-vg-target или расположить рядом с кнопкой внутри .vg-dropdown.
<div class="vg-dropdown">
<button
type="button"
data-vg-toggle="dropdown"
data-placement="auto"
aria-expanded="false"
>
Действия
</button>
<div class="vg-dropdown-content">
<div class="vg-dropdown-container account-menu">
<a href="/profile">Профиль</a>
<a href="/logout">Выйти</a>
</div>
</div>
</div>JavaScript API
Используйте VGDropdown.init(), если параметры или момент инициализации определяет приложение. Метод также подключает click, hover и клавиатурные обработчики.
import {VGDropdown} from 'vgapp';
const toggle = document.querySelector('[data-account-menu]');
const dropdown = VGDropdown.init(toggle, {
placement: 'auto',
hover: false,
});
dropdown.show();
dropdown.hide();
dropdown.toggle();
toggle.parentElement
.querySelector('.vg-dropdown-content')
.addEventListener('vg.dropdown.shown', () => {
console.log('Меню открыто');
});
dropdown.dispose();CSS-настройка
Размер и оформление панели меняются публичными CSS-переменными. Состояния show, fade и open управляются самим модулем.
.account-dropdown {
--vg-dropdown-min-width: 14rem;
--vg-dropdown-bg-color: var(--vg-surface-bg);
--vg-dropdown-color: var(--vg-text-primary);
--vg-dropdown-border-color: var(--vg-border-default);
--vg-dropdown-border-radius: var(--vg-radius-lg);
--vg-dropdown-box-shadow: var(--vg-shadow-md);
}
.account-dropdown .account-menu {
display: grid;
padding: .5rem;
gap: .25rem;
}
.account-dropdown .account-menu a {
padding: .5rem .75rem;
border-radius: var(--vg-radius-md);
}Параметры и события
Вложенные настройки Data API записываются через дефис: animation.fade становится data-animation-fade, ajax.once — data-ajax-once.
Основные параметры
placementauto- auto или top/bottom/left/right с -start/-end.
hoverfalse- Открытие по наведению на десктопе.
animation.fadetrue- Мягкое появление средствами VGDropdown.
animation.enablefalse- Использование внешних CSS-классов анимации.
ajax.route''- Адрес отложенной загрузки.
ajax.target''- Селектор элемента для ответа.
ajax.oncefalse- Не повторять запрос после успешной загрузки.
События
vg.dropdown.show- Перед открытием; отправляется на панели и может быть отменено.
vg.dropdown.shown- После появления панели.
vg.dropdown.hide- Перед закрытием; отправляется на панели и может быть отменено.
vg.dropdown.hidden- После завершения закрытия.
vg.dropdown.loaded- После AJAX-запроса; отправляется на управляющем элементе.
Клик внутри .vg-dropdown-content не закрывает панель автоматически. Для действия без перехода вызовите hide() после обработки.