Listbox
Компонент Listbox — это стилизованный выпадающий список (listbox) с поддержкой одиночного и множественного выбора, поиска, метки, состояний ошибки и автоматическим позиционированием выпадающей панели.
Обзор
- Основное назначение: выбор одного или нескольких элементов из выпадающего списка.
- Ключевые возможности:
- Одиночный (
multiple: false) и множественный (multiple: true) выбор. - Автоматическое позиционирование панели (сверху/снизу) в зависимости от доступного пространства.
- Перерасчёт позиции при скролле и ресайзе.
- Кастомное отображаемое поле через
displayField. - Плейсхолдер для пустого значения.
- Телепортация выпадающей панели в
body. - Закрытие по клику на оверлей.
- Анимация появления/скрытия панели.
- Метка (
label) и сообщение об ошибке.
- Одиночный (
API компонента
Props
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
modelValue | Object | Array | Выбранное значение. При multiple: true — массив объектов. | |
data | Array | [] | Массив объектов-опций для выбора. |
placeholder | String | 'Выберите опцию' | Текст, отображаемый когда ничего не выбрано. |
label | String | Текст метки над списком. | |
displayField | String | 'label' | Ключ в объекте опции, значение которого отображается в списке и кнопке. |
error | Boolean | String | false | Сообщение об ошибке. Если строка — отображается под списком. |
multiple | Boolean | false | Включает режим множественного выбора. |
className | String | Дополнительные CSS-классы для корневого элемента Listbox. | |
classNames | Object | {} | Объект для кастомизации внутренних классов. Ключи: root, listbox, error. |
rootProps | Object | {} | Дополнительные атрибуты для корневого элемента. |
События
| Событие | Параметр | Описание |
|---|---|---|
update:modelValue | Object | Array | Вызывается при изменении выбранного значения. |