TUI

<template>
  <div class="component-card-demo-wrap">
    <div>
      <h4 style="font-size: 14px; font-weight: 500; margin-bottom: 8px">默认样式</h4>
      <TsSwitch v-model="defaultValue" />
    </div>
    <div>
      <h4 style="font-size: 14px; font-weight: 500; margin-bottom: 8px">圆角样式</h4>
      <TsSwitch v-model="defaultValue" round />
    </div>
  </div>
</template>

<script setup lang="ts">
import { TsSwitch } from 'tui';
import { ref } from 'vue';

const defaultValue = ref(true);
</script>

<template>
  <div class="component-card-demo-wrap">
    <div>
      <h4 style="font-size: 14px; font-weight: 500; margin-bottom: 8px">绿色主题</h4>
      <TsSwitch v-model="customColor1" activeColor="#52c41a" inactiveColor="#d9d9d9" />
    </div>
    <div>
      <h4 style="font-size: 14px; font-weight: 500; margin-bottom: 8px">橙色主题</h4>
      <TsSwitch v-model="customColor2" activeColor="#fa541c" inactiveColor="#999999" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { TsSwitch } from 'tui';
import { ref } from 'vue';

const customColor1 = ref(true);
const customColor2 = ref(false);
</script>

<template>
  <div class="component-card-demo-wrap">
    <div>
      <h4 style="font-size: 14px; font-weight: 500; margin-bottom: 8px">默认禁用</h4>
      <TsSwitch v-model="disabledTrue" :disabled="true" />
    </div>
    <div>
      <h4 style="font-size: 14px; font-weight: 500; margin-bottom: 8px">自定义禁用颜色</h4>
      <TsSwitch v-model="disabledTrue" :disabled="true" disabledColor="#c0c0c0" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { TsSwitch } from 'tui';
import { ref } from 'vue';

const disabledTrue = ref(false);
</script>

<template>
  <div class="component-card-demo-wrap">
    <TsSwitch v-model="slotValue" actionBg="transparent" activeColor="var(--bussiness-bg-gray)" inactiveColor="var(--bussiness-bg-gray)">
      <template #active>
        <TsIcon name="SunIcon" color="#ff2525" fontSize="16px" />
      </template>
      <template #inactive>
        <TsIcon name="MoonIcon" color="#b6b6b6" fontSize="16px" />
      </template>
    </TsSwitch>
  </div>
</template>

<script setup lang="ts">
import { TsSwitch, TsIcon } from 'tui';
import { ref } from 'vue';

const slotValue = ref(false);
</script>