Switch

Yorliqlar, belgilar, yuklash, asinxron tasdiqlash va moslashtirilgan qiymatlarga ega togl 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

Yo‘l ichidagi matn.

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

Boolean bo‘lmagan qiymatlardan foydalaning.

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)

Almashtirishdan oldin tasdiq so‘rang.

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

Switch’ni yorliqning o‘ng tomoniga joylashtiring.

Wi-FiConnect to wireless networksBluetoothEnable Bluetooth connectivityAirplane mode

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

Press Animation

Bosilganda thumb cho‘ziladi va taktil javob beradi. Effektni ko‘rish uchun yuqoridagi istalgan switch’ni bosib ushlab turib ko‘ring.

Props

Prop	Type	Default	Description
modelValue	boolean | string | number	false	Qiymat (v-model)
activeValue	boolean | string | number	true	Yoqilganidagi qiymat
inactiveValue	boolean | string | number	false	O‘chirilganidagi qiymat
disabled	boolean	false	O‘chirish
loading	boolean	false	Yuklash aylantirgichi
readonly	boolean	false	Faqat o‘qish
size	'xs' | 'sm' | 'default' | 'lg' | 'xl'	'default'	O‘lcham
activeColor	string	''	Yoqilgan rang
inactiveColor	string	''	O‘chirilgan rang
activeText	string	''	Yoqilganidagi matn
inactiveText	string	''	O‘chirilganidagi matn
activeIcon	Component	—	Yoqilganidagi belgi (thumb ichida)
inactiveIcon	Component	—	O‘chirilganidagi belgi (thumb ichida)
inlineText	boolean	false	Yo‘l ichida matnni ko‘rsatish
label	string	''	Yorliq matni
description	string	''	Yorliq ostidagi tavsif
square	boolean	false	Kvadrat shakl
beforeChange	() => boolean | Promise<boolean>	—	Almashtirishdan oldingi asinxron tekshiruvchi
required	boolean	false	Forma tekshiruvi uchun majburiy sifatida belgilash
reverse	boolean	false	Switch’ni o‘ng tomonga joylashtirish
trackClass	string | string[] | object	—	Yo‘l uchun moslashtirilgan class(lar)
thumbClass	string | string[] | object	—	Thumb uchun moslashtirilgan class(lar)

Events

Event	Type	Description
update:modelValue	(v)	Qiymat o‘zgardi
change	(v)	Qiymat o‘zgardi

Slots

Slot	Description
default	Moslashtirilgan yorliq kontenti
description	Moslashtirilgan tavsif