Селект позволяет выбрать одно или несколько значений из предопределенного списка.
При единичном выборе значения контрол сброса скрыт. Его отображение можно включить отдельно.
Используйте поиск, когда в списке больше 10 элементов.
Поиск может осуществляться по первым символам или полному совпадению, в зависимости от конкретной задачи и предпочтений пользователей.
При малом количестве опций поиск может автоматически скрываться. По умолчанию такая возможность отключена.
Для настройки используйте атрибут searchMinOptionsThreshold со значением:
auto. Поиск будет скрыт, если количество опций меньше 10. (поведение по умолчанию).<число>. Выключение поиска, если количество опций меньше указанного числа.Используйте kbqSelectOptionsProvider, чтобы настроить все поля в модуле по единым правилам:
import { kbqSelectOptionsProvider } from '@koobiq/components/select';
@NgModule({
providers: [
kbqSelectOptionsProvider({ searchMinOptionsThreshold: 'auto' })
]
})
В нижнем колонтитуле можно разместить вспомогательные элементы: кнопки, ссылки, подсказки.
По умолчанию максимальная высота спиcка равна 256px. Когда вариантов выбора много, в выпадающем меню появляется прокрутка.
При необходимости можно настроить высоту. Например, в обычном меню видно 7–8 элементов. Если предполагается выбор из 10 опций, то можно увеличить высоту списка и показать все элементы, не скрывая малую часть под скроллом.
Ширина выпадающего списка равна селекту и она увеличивается, когда в списке есть длинный текст.
Минимальная ширина выпадающего списка равна 200px для аккуратного отображения рядом с узким селектом. При необходимости минимальную ширину можно изменить. Для этого можно использовать атрибут panelMinWidth и передать в него числовое значение.
Для настройки минимальной ширины выпадающих списков всех селектов внутри модуля, имеющих единые правила отображения, можно использовать провайдер kbqSelectOptionsProvider.
import { kbqSelectOptionsProvider } from '@koobiq/components/select';
@NgModule({
providers: [
kbqSelectOptionsProvider({ panelMinWidth: 350 })
]
})
Выпадающий список можно настроить так, чтобы его ширина совпадала с полем. Для этого используйте атрибут panelWidth со значением auto. При этом список не станет меньше panelMinWidth — задайте panelMinWidth равным 0, если список должен точно повторять узкое поле.
Чтобы задать фиксированную ширину 400 px, используйте атрибут panelWidth со значением 400. Фиксированная ширина используется как есть, поэтому panelMinWidth к ней не применяется.
Рост по содержимому останавливается на 640 px. Ограничение мягкое: оно не делает список меньше ширины поля и не уменьшает явно заданный panelWidth. Изменить его для одного поля можно атрибутом panelMaxWidth, а для всего приложения — задав токен --kbq-panel-size-width-max на :root (он общий с Tree-select, Autocomplete и Dropdown).
Для настройки ширины выпадающих списков всех селектов внутри модуля, имеющих единые правила отображения, можно использовать провайдер kbqSelectOptionsProvider.
import { kbqSelectOptionsProvider } from '@koobiq/components/select';
@NgModule({
providers: [
kbqSelectOptionsProvider({ panelWidth: 'auto' })
]
})
Селект может содержать уже заранее выбранные значения.
Выбранные элементы можно переместить в начало списка.
Добавьте cdk-virtual-scroll-viewport в шаблон компонента, чтобы отображать только видимые элементы и улучшить производительность.
Если в качестве значений опций используются объекты, задайте virtualOptionFactory — функцию, которая по значению возвращает KbqVirtualOption с подписью (и при необходимости с per-value disabled). Фабрика срабатывает, когда KbqOption выбранного значения не отрендерен: его выкинул виртуальный скролл из viewport или значение установлено программно до рендера соответствующей опции. Полученный KbqVirtualOption используется и для подписи в триггере одиночного селекта, и для тегов в режиме мультивыбора.
По умолчанию выпадающее меню скрывается под горизонтальный Navbar и Topbar, в остальных случаях показывается поверх соседних элементов.
Чтобы меню не перекрывало нужный вам элемент при прокрутке, а скрывалось под ним, настройте положение через кастомный z-index или параметры смещения.