Dropdown показывает меню с действиями или вариантами рядом с триггером и поддерживает отключённое состояние, загрузку, футер и управление с клавиатуры.
Добавьте атрибут progress к kbq-dropdown-item, чтобы отобразить анимацию загрузки на элементе. Его можно совмещать с disabled, чтобы дополнительно запретить взаимодействие с элементом во время загрузки.
Внутри пункта меню можно добавить отдельную кнопку (например, для перехода в настройки). Она работает независимо: клик по ней не закрывает меню, и на неё можно переключиться по Tab.
Сам пункт меню при этом должен быть обычным блоком, а не кнопкой.
Если пункт в состоянии загрузки — дополнительная кнопка остаётся видимой, но становится недоступной.
Пункт меню можно сделать обычной ссылкой — тогда весь блок будет вести на другую страницу.
В нижнем колонтитуле можно разместить вспомогательные элементы: кнопки, ссылки, подсказки.
Механизм предотвращает преждевременное закрытие вложенного меню при движении указателя мыши. Меню остаётся открытым, даже если указатель задевает соседние элементы — при условии, что движение происходит в пределах отведённой области. Настроить можно двумя способами:
safeArea;KBQ_DROPDOWN_DEFAULT_OPTIONS.Режим "циклической навигации" по списку, где после достижения одного конца списка мы переходим к другому.
Рекурсивное отображение массива или объекта, позволяющее создавать вложенные выпадающие меню.
Директива kbqDropdownSearch на kbq-form-field делает его полем поиска панели: настраивает внешний вид поля и берет на себя клавиатуру.
Курсор остается в поле все время работы с меню: ArrowUp и ArrowDown перемещают подсветку по пунктам, Enter выбирает подсвеченный, первый Escape очищает запрос, второй закрывает меню.
Поиск разбивает многословный запрос на части и ищет их независимо друг от друга, удаляет пробелы по краям, не зависит от регистра и сворачивает диакритические знаки. Алгоритм работы описан в руководстве «Умный поиск».
Раскрывающийся список с действиями можно открыть рядом с текстовым курсором — например, после ввода символа / в редакторе. Пользователь выбирает нужное действие и продолжает вводить текст. Такой сценарий подходит для командных меню, подсказок и других быстрых действий.
kbqDropdownTriggerOrigin позволяет привязать раскрывающийся список к элементу или прямоугольной области в координатах окна, а не только к триггеру. kbqCreateCaretOrigin создает динамическую привязку к текстовому курсору: при обновлении положения списка координаты курсора измеряются заново. Метод updatePosition() обновляет положение открытого списка, а значение null возвращает его к триггеру.
Чтобы сохранить обычное поведение клавиатуры при редактировании текста, триггер нужно вынести за пределы области ввода. При необходимости код области ввода передает отдельные события раскрывающемуся списку через handleKeydown($event). Атрибут [kbqDropdownTriggerAutoFocus]="false" оставляет текстовый курсор в области ввода, а [activeDescendantNavigation]="true" позволяет перемещать подсветку по пунктам без перевода фокуса на список.
Используйте свойство xPosition для управления горизонтальным выравниванием панели выпадающего меню относительно триггера. Поддерживаемые значения: 'after' (по умолчанию), 'before' и 'center'.
По умолчанию панель растет по содержимому, но не становится меньше ширины триггера или 200 px, а рост останавливается на 640 px. Настраивается теми же атрибутами panelWidth, panelMinWidth и panelMaxWidth, что и у Select и Autocomplete:
<!-- По ширине триггера --> <kbq-dropdown panelWidth="auto" /> <!-- Точная ширина; panelMinWidth не применяется --> <kbq-dropdown [panelWidth]="400" /> <!-- Изменена максимальная ширина раскрывающегося списка --> <kbq-dropdown [panelMaxWidth]="800" />
Ограничение в 640 px мягкое и действует только на рост по содержимому. Оно не делает панель меньше ширины триггера и не уменьшает явно заданный panelWidth: если любое из этих значений больше 640 px, панель будет ровно такой ширины.
Значения по умолчанию заданы токенами:
| Токен | По умолчанию |
|---|---|
--kbq-dropdown-size-container-width-min | 200px |
--kbq-dropdown-size-container-width-max | var(--kbq-panel-size-width-max, 640px) |
Токен --kbq-panel-size-width-max — общий для всех выпадающих панелей библиотеки. Задайте его один раз на :root, чтобы ограничить Select, Tree-select, Autocomplete и Dropdown одновременно.
Вложенные панели и панели, перекрывающие триггер по вертикали, по триггеру не выравниваются — для них работают только токены.
Если триггер — только часть более крупного элемента управления, задайте KbqDropdownTrigger.widthOrigin, указав элемент, с которым панель должна совпадать. Split button делает это через параметр panelAutoWidth.
По умолчанию меню показывается поверх горизонтальных Navbar и Topbar. Чтобы меню, открытое из содержимого страницы, при прокрутке уходило под них, пометьте область содержимого директивой kbqOverlayLayer — см. Панели под липкой шапкой. Меню, открытое из самой шапки, как Actions в примере, остается над ней.