TUI

<template>
  <TsSwitch v-model="defaultValue" />
  <TsSwitch v-model="defaultValue" round />
</template>

<script setup lang="ts">
  const defaultValue = ref(true);

</script>

<template>
  <TsSwitch v-model="customColor1" activeColor="#52c41a" inactiveColor="#d9d9d9" />
  <TsSwitch v-model="customColor2" activeColor="#fa541c" inactiveColor="#999999" />
</template>

<script setup lang="ts">
  const customColor1 = ref(true);
  const customColor2 = ref(false);
</script>

<template>
  <TsSwitch v-model="disabledTrue" :disabled="true" />
  <TsSwitch v-model="disabledTrue" :disabled="true" disabledColor="#c0c0c0" />
</template>

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

<TsSwitch v-model="disabledTrue" activeColor="#f6f6f6" inactiveColor="#f6f6f6">
  <template #active>🌞</template>
  <template #inactive>🌙</template>
</TsSwitch>

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