Селект позволяет выбрать одно или несколько значений из предопределенного списка.
При единичном выборе значения контрол сброса скрыт. Его отображение можно включить отдельно.
Используйте поиск, когда в списке больше 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.
Для задания фиксированной ширины в 400px для выпадающего списка необходимо использовать атрибут panelWidth со значением 400.
Для настройки ширины выпадающих списков всех селектов внутри модуля, имеющих единые правила отображения, можно использовать провайдер kbqSelectOptionsProvider.
import { kbqSelectOptionsProvider } from '@koobiq/components/select';
@NgModule({
providers: [
kbqSelectOptionsProvider({ panelWidth: 'auto' })
]
})
Селект может содержать уже заранее выбранные значения.
Выбранные элементы можно переместить в начало списка.
Добавьте cdk-virtual-scroll-viewport в шаблон компонента, чтобы отображать только видимые элементы и улучшить производительность.
По умолчанию выпадающее меню скрывается под горизонтальный Navbar и Topbar, в остальных случаях показывается поверх соседних элементов.
Чтобы меню не перекрывало нужный вам элемент при прокрутке, а скрывалось под ним, настройте положение через кастомный z-index или параметры смещения.