Кастомизация

На этой странице вы можете создать настраиваемый компонент для ваших Vue-приложений, изменяя его свойства под свои нужды. Здесь доступен живой предпросмотр кода и поведения компонента, что позволяет легко проектировать динамичные и удобные интерфейсы.

Select

Find...

No data

Код

Опции

красный
синий
зеленый
желтый
фиолетовый
оранжевый
черный
белый
розовый
коричневый

Выбор данных

Элементы данных, доступные для выбора в выпадающем списке. Должен быть массивом элементов.

id
name
shortName

Ключ выбора

Ключ, используемый для уникальной идентификации каждого элемента в наборе данных. Установите имя свойства, используемого в качестве ключа.

id
name
shortName

Значение выбора

Ключ, используемый для получения отображаемого значения каждого элемента. Установите имя свойства, используемого в качестве отображаемого значения.

filled
outlined
underlined

Режим

Определяет режим стилизации компонента. Возможные значения: 'filled', 'outlined', 'underlined'.

Метка

Текстовая метка, связанная с полем ввода. Отображается над или рядом с элементом ввода.

offsetDynamic
offsetStatic
dynamic
static
vanishing
none

Режим метки

Определяет, как отображается метка. Возможные значения: 'floating', 'inline', 'hidden'.

Автофокус

Автоматически фокусирует поле ввода при монтировании. Установите в true для включения автофокуса.

Множественный

Включает выбор нескольких элементов. Установите в true для разрешения множественного выбора.

Максимально видимых

Максимальное количество видимых выбранных элементов. Установите число для ограничения количества видимых элементов.

Кнопка закрытия бейджа

Включает кнопку закрытия для бейджей в режиме множественного выбора. Установите в true для отображения кнопки закрытия на бейджах.

Недействительно

Указывает, находится ли поле ввода в недействительном состоянии. Установите в true, если есть ошибки валидации.

Сообщение о недействительности

Сообщение об ошибке валидации, отображаемое при недействительном вводе.

Обязательно

Указывает, является ли поле ввода обязательным. Установите в true, если поле должно быть заполнено перед отправкой формы.

Загрузка

Указывает, находится ли поле ввода в состоянии загрузки. Установите в true для отображения индикатора загрузки.

Отключено

Отключает поле ввода, делая его нередактируемым. Установите в true для отключения ввода.

Очистить

Включает кнопку очистки для сброса поля ввода. Установите в true для отображения кнопки очистки.

Помощь

Дополнительный текст справки, отображаемый под полем ввода. Используйте для предоставления дополнительной информации пользователю.

Ширина

Задает ширину поля ввода. Может быть установлено любое допустимое значение CSS (например, '100px', '50%').

Высота

Задает высоту поля ввода. Может быть установлено любое допустимое значение CSS (например, '50px', 'auto').

None
0
100
500
1000

Анимация

Определяет анимацию для переходов в макете. Возможные значения: 'transition-all duration-500', 'transition-none'.

Нет данных

Текст, отображаемый, когда в списке нет элементов. Используйте для предоставления сообщения, когда список пуст.

Нет запроса

Отключает фильтрацию элементов на основе запроса. Установите в true для отключения фильтрации.

Класс выбора

Пользовательский CSS-класс для контейнера выбора. Используйте для применения дополнительных стилей к контейнеру выбора.

Класс списка выбора

Пользовательский CSS-класс для контейнера выпадающего списка. Используйте для применения дополнительных стилей к выпадающему списку.

Класс маски запроса

Пользовательский CSS-класс для маски текста запроса. Используйте для применения дополнительных стилей к тексту запроса.

Класс тела

Пользовательский CSS-класс для тела макета. Используйте для применения дополнительных стилей к телу ввода.

Класс

Пользовательский CSS-класс для контейнера макета. Используйте для применения дополнительных стилей к макету ввода.

Полный список свойств

На этой странице представлено API компонента Select, включая описание пропсов, событий, слотов и публичных методов.