Dropdown показывает меню с действиями или вариантами рядом с триггером и поддерживает отключённое состояние, загрузку, футер и управление с клавиатуры.
Добавьте атрибут progress к kbq-dropdown-item, чтобы отобразить анимацию загрузки на элементе. Его можно совмещать с disabled, чтобы дополнительно запретить взаимодействие с элементом во время загрузки.
Внутри пункта меню можно добавить отдельную кнопку (например, для перехода в настройки). Она работает независимо: клик по ней не закрывает меню, и на неё можно переключиться по Tab.
Сам пункт меню при этом должен быть обычным блоком, а не кнопкой.
Если пункт в состоянии загрузки — дополнительная кнопка остаётся видимой, но становится недоступной.
Пункт меню можно сделать обычной ссылкой — тогда весь блок будет вести на другую страницу.
В нижнем колонтитуле можно разместить вспомогательные элементы: кнопки, ссылки, подсказки.
Механизм предотвращает преждевременное закрытие вложенного меню при движении указателя мыши. Меню остаётся открытым, даже если указатель задевает соседние элементы — при условии, что движение происходит в пределах отведённой области. Настроить можно двумя способами:
safeArea;KBQ_DROPDOWN_DEFAULT_OPTIONS.Режим "циклической навигации" по списку, где после достижения одного конца списка мы переходим к другому.
Рекурсивное отображение массива или объекта, позволяющее создавать вложенные выпадающие меню.
Директива kbqDropdownSearch на kbq-form-field делает его полем поиска панели: настраивает внешний вид поля и берет на себя клавиатуру.
Курсор остается в поле все время работы с меню: ArrowUp и ArrowDown перемещают подсветку по пунктам, Enter выбирает подсвеченный, первый Escape очищает запрос, второй закрывает меню.
Поиск разбивает многословный запрос на части и ищет их независимо друг от друга, удаляет пробелы по краям, не зависит от регистра и сворачивает диакритические знаки. Алгоритм работы описан в руководстве «Умный поиск».
Используйте свойство 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.