Switch

Базовое использование

Компонент Switch используется для переключения между двумя состояниями (вкл/выкл) и поддерживает различные варианты настройки.

<Switch v-model="isChecked"></Switch>

Базовое использование компонента Switch предполагает привязку свойства данных через директиву v-model, что обеспечивает двустороннюю привязку данных между значением переключателя и указанным свойством.

Тип переключателя

Проп switchingType позволяет указать тип переключателя. Доступные варианты: "checkbox" (чекбокс) и "switch" ( переключатель).

<Switch
    switchingType="checkbox"
    v-model="isChecked">
</Switch>
<Switch
    switchingType="switch"
    v-model="isChecked">
</Switch>

Метка

Проп label позволяет добавить текстовую метку рядом с переключателем.

<Switch
    label="Включить уведомления"
    v-model="isChecked">
</Switch>

Отключенное состояние

Проп disabled отключает переключатель при значении true.

<Switch
    disabled
    v-model="isChecked">
</Switch>

Подсказка

Проп help позволяет добавить поясняющий текст под переключателем.

<Switch
    help="Этот переключатель включает или выключает уведомления."
    v-model="isChecked">
</Switch>

Обязательное поле

Проп required указывает, является ли переключатель обязательным для выбора.

<Switch
    required
    label="Принять условия"
    v-model="isChecked">
</Switch>

Стиль оформления

Проп mode определяет стиль переключателя. Доступные варианты: "outlined" (контурный), "underlined" (подчеркнутый), "filled" (заполненный) и "none" (без стиля).

<Switch
    mode="outlined"
    v-model="isChecked">
</Switch>
<Switch
    mode="underlined"
    v-model="isChecked">
</Switch>
<Switch
    mode="filled"
    v-model="isChecked">
</Switch>
<Switch
    mode="none"
    v-model="isChecked">
</Switch>

Скругление углов

Проп rounded определяет степень скругления углов. Доступные значения: от 1 до 10, number и "full" (полное скругление).

<Switch
    :rounded="2"
    v-model="isChecked">
</Switch>
<Switch
    :rounded="5"
    v-model="isChecked">
</Switch>
<Switch
    rounded="full"
    v-model="isChecked">
</Switch>

Иконки

Пропы iconActive и iconInactive позволяют задать иконки для активного и неактивного состояния переключателя соответственно.

<Switch
    iconActive="lucide:sun"
    iconInactive="lucide:moon-star"
    switchingType="switch"
    v-model="isChecked">
</Switch>

Пользовательский CSS-класс

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

<Switch
    class="custom-switch-class"
    v-model="isChecked">
</Switch>