Switch

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

false

<script setup lang="ts">
const value = ref(false)
</script>

<template>
  <VxSwitch v-model="value" />
</template>

With Label

Enable notificationsDark modeSwitch between light and dark theme

<template>
  <VxSwitch v-model="value" label="Enable notifications" />
  <VxSwitch v-model="value" label="Dark mode" description="Switch between themes" />
</template>

Active / Inactive Text

OffOnNoYes

<template>
  <VxSwitch active-text="On" inactive-text="Off" />
</template>

Inline Text

Текст внутри дорожки.

ONOFFYNYESNO

<template>
  <VxSwitch active-text="ON" inactive-text="OFF" inline-text />
</template>

Icons

🌙

<template>
  <VxSwitch v-model="value">
    {{ value ? '🌙 Dark' : '☀️ Light' }}
  </VxSwitch>
</template>

Custom Colors

<template>
  <VxSwitch active-color="#22c55e" />
  <VxSwitch active-color="#ef4444" inactive-color="#374151" />
</template>

Custom Values

Используйте нелогические значения.

LightDark

v-model: "dark"

DisabledEnabled

v-model: 1 (number)

<template>
  <VxSwitch v-model="theme" active-value="dark" inactive-value="light" />
  <!-- v-model: "dark" or "light" -->

  <VxSwitch v-model="status" :active-value="1" :inactive-value="0" />
  <!-- v-model: 1 or 0 -->
</template>

Sizes

xssmdefaultlgxl

<template>
  <VxSwitch size="xs" />
  <VxSwitch size="sm" />
  <VxSwitch />
  <VxSwitch size="lg" />
  <VxSwitch size="xl" />
</template>

Square

<template>
  <VxSwitch square />
</template>

Loading

<template>
  <VxSwitch v-model="value" loading />
</template>

Before Change (Async)

Запрашивайте подтверждение перед переключением.

Confirm before toggle

true

<script setup>
async function beforeChange() {
  return confirm('Are you sure?')
}
</script>

<template>
  <VxSwitch v-model="value" :before-change="beforeChange" />
</template>

Readonly

On (readonly)Off (readonly)

<template>
  <VxSwitch :model-value="true" readonly />
</template>

Disabled

<template>
  <VxSwitch disabled />
</template>

Reverse Layout

Расположите переключатель справа от подписи.

Wi-FiConnect to wireless networksBluetoothEnable Bluetooth connectivityAirplane mode

<template>
  <VxSwitch v-model="value" label="Wi-Fi" description="..." reverse />
</template>

Press Animation

Маркер растягивается при нажатии, обеспечивая тактильную обратную связь. Попробуйте нажать и удерживать любой переключатель выше, чтобы увидеть эффект.

Props

Prop	Type	Default	Description
modelValue	boolean | string | number	false	Значение (v-model)
activeValue	boolean | string | number	true	Значение при включении
inactiveValue	boolean | string | number	false	Значение при выключении
disabled	boolean	false	Отключить
loading	boolean	false	Спиннер загрузки
readonly	boolean	false	Только для чтения
size	'xs' | 'sm' | 'default' | 'lg' | 'xl'	'default'	Размер
activeColor	string	''	Цвет во включённом состоянии
inactiveColor	string	''	Цвет в выключенном состоянии
activeText	string	''	Текст во включённом состоянии
inactiveText	string	''	Текст в выключенном состоянии
activeIcon	Component	—	Иконка при включении (внутри маркера)
inactiveIcon	Component	—	Иконка при выключении (внутри маркера)
inlineText	boolean	false	Показывать текст внутри дорожки
label	string	''	Текст подписи
description	string	''	Описание под подписью
square	boolean	false	Квадратная форма
beforeChange	() => boolean | Promise<boolean>	—	Асинхронная проверка перед переключением
required	boolean	false	Пометить как обязательное для валидации формы
reverse	boolean	false	Расположить переключатель справа
trackClass	string | string[] | object	—	Пользовательский класс(ы) для дорожки
thumbClass	string | string[] | object	—	Пользовательский класс(ы) для маркера

Events

Event	Type	Description
update:modelValue	(v)	Значение изменено
change	(v)	Значение изменено

Slots

Slot	Description
default	Пользовательское содержимое подписи
description	Пользовательское описание