Switch
Компонент Switch — это стилизованный переключатель (toggle) с поддержкой двух вариантов оформления, асинхронного обработчика изменений, индикатора загрузки и состояний блокировки.
Обзор
- Основное назначение: переключение между двумя состояниями (вкл/выкл).
- Ключевые возможности:
- Два варианта оформления:
basic(с заливкой) иoutlined(контурный). - Цветовая палитра.
- Асинхронный обработчик изменений с индикатором загрузки.
- Автоматический откат при ошибке или возврате
false. - Блокированное состояние (
disabled). - Нестилизованный режим (
unstyled). - Встроенная метка (
label) или внешняя. - ARIA-роль
switch. - Событие
errorпри исключении в асинхронном обработчике.
- Два варианта оформления:
API компонента
Props
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
modelValue | Boolean | Текущее состояние переключателя (v-model). | |
variant | String | 'basic' | Вариант оформления. Возможные значения: 'basic', 'outlined'. |
color | String | 'primary' | Цвет переключателя. Возможные значения: 'primary', 'secondary', 'info', 'success', 'warning', 'error'. |
label | String | Number | Object | Текст метки. Если указан, переключатель оборачивается в <label>. | |
labelProps | Object | {} | Дополнительные атрибуты для элемента label. |
disabled | Boolean | false | Блокирует переключатель. |
unstyled | Boolean | false | Убирает все стили по умолчанию. |
className | String | Дополнительные CSS-классы для поля ввода. | |
classNames | Object | {} | Объект для кастомизации внутренних классов. Ключи: label, labelText, input. |
onChange | Function | Асинхронная функция-обработчик изменения. Принимает новое значение, может вернуть false для отмены. | |
role | String | 'switch' | ARIA-роль элемента. |
События
| Событие | Параметр | Описание |
|---|---|---|
update:modelValue | Boolean | Вызывается при успешном изменении состояния. |
error | Error | Вызывается при возникновении ошибки в асинхронном onChange. |
Методы
| Метод | Описание |
|---|---|
focus() | Устанавливает фокус на переключатель. |
blur() | Убирает фокус с переключателя. |
Data-атрибуты
| Атрибут | Значение | Условие |
|---|---|---|
data-disabled | 'true' | Переключатель заблокирован или в состоянии загрузки. |