Компонент StyledSwitch — это кастомный переключатель (toggle) на базе Headless UI Switch. Поддерживает индикатор загрузки, настраиваемые размеры, рамку бегунка и состояния блокировки.
- Основное назначение: стилизованный переключатель для форм, таблиц и настроек.
- Ключевые возможности:
- Анимированное переключение с плавным движением бегунка.
- Индикатор загрузки (спиннер на бегунке).
- Настройка размера и толщины рамки бегунка через CSS-переменные.
- Состояния: активное, неактивное, заблокированное.
- Поддержка RTL (автоматический отступ в обратную сторону).
- Доступность: скрытый текст для скринридеров (
sr-only).
| Проп | Тип | По умолчанию | Описание |
|---|
checked | Boolean | false | Состояние переключателя. |
loading | Boolean | false | Показывает спиннер на бегунке и блокирует переключение. |
disabled | Boolean | false | Блокирует переключатель. |
srText | String | 'Toggle' | Текст для скринридеров (доступность). |
size | Number | 5 | Размер переключателя. Ширина = size / 2 rem, высота = size / 4 rem. |
thumbBorder | String | '2px' | Толщина рамки бегунка. Устанавливает CSS-переменную --thumb-border. |
style | Object | {} | Дополнительные CSS-стили для корневого элемента. |
className | String | | Дополнительные CSS-классы для корневого элемента. |
classNames | Object | {} | Объект для кастомизации внутренних классов. Ключи: switch, thumb. |
| Событие | Параметр | Описание |
|---|
update:checked | Boolean | Вызывается при переключении. |
change | Boolean | Вызывается при переключении (дублирует update:checked). |
