Swap
Компонент Swap позволяет переключать видимость двух элементов с анимацией. Полезен для создания переключателей тёмной/светлой темы, кнопок «лайк», индикаторов состояния и других элементов с двумя взаимоисключающими состояниями.
Обзор
- Основное назначение: анимированное переключение между двумя состояниями (on/off).
- Ключевые возможности:
- Три эффекта анимации:
fade,flip,rotate. - Контролируемый (
modelValue) и неконтролируемый (defaultValue) режимы. - Блокированное состояние (
disabled). - Возможность заменить корневой тег через
component. - Data-атрибуты для стилизации дочерних элементов.
- Три эффекта анимации:
API компонента
Props
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
modelValue | String | Текущее состояние в контролируемом режиме. Возможные значения: 'on', 'off'. | |
defaultValue | String | 'on' | Начальное состояние в неконтролируемом режиме. Возможные значения: 'on', 'off'. |
effect | String | 'fade' | Эффект анимации переключения. Возможные значения: 'fade', 'flip', 'rotate'. |
component | String | Object | 'div' | Позволяет заменить корневой HTML-тег или передать компонент. |
disabled | Boolean | false | Блокирует переключение. |
className | String | Дополнительные CSS-классы. |
События
| Событие | Параметр | Описание |
|---|---|---|
update:modelValue | String ('on' | 'off') | Вызывается при переключении состояния. |
click | Event | Вызывается при клике на компонент. |
Data-атрибуты
Компонент устанавливает следующие data-атрибуты на корневой элемент:
| Атрибут | Значение | Описание |
|---|---|---|
data-swap-value | 'on' | 'off' | Текущее состояние переключателя. |
data-swap-effect | 'fade' | 'flip' | 'rotate' | Текущий эффект анимации. |
data-disabled | 'true' | Компонент заблокирован (только при disabled: true). |
Использование с дочерними элементами
Дочерние элементы должны иметь атрибуты data-swap-on и data-swap-off для обозначения элемента каждого состояния:
data-swap-on: отображается, когда состояние'on'.data-swap-off: отображается, когда состояние'off'.