kui-vue/components/switch/demo/withText.md

A lightweight desktop UI component library suitable for Vue.js 2.

<cn>
### 文字 / 图标
通过 `true-text` 和 `false-text` 设置选中和非选中呈现文字, 通过设置 `slot` 为 `(checked|unchecked)` 控制内容
</cn>

```vue
<template>
  <Space vertical align="start">
    <k-switch true-text="Yes" false-text="No" />
    <k-switch true-text="｜" false-text="〇" />
    <k-switch true-text="｜" false-text="〇" checked />
    <k-switch true-text="On" false-text="Off" />
    <k-switch>
      <template #checked><Icon :type="Checkmark" /></template>
      <template #unchecked><Icon :type="Close" /></template>
    </k-switch>
    <k-switch>
      <template #checked><Icon :type="LogoApple" /></template>
      <template #unchecked><Icon :type="LogoMicrosoft" /></template>
    </k-switch>
    <k-switch>
      <template #unchecked><Icon :type="Airplane" /></template>
      <template #checked><Icon :type="Wifi" /></template>
    </k-switch>
  </Space>
</template>
<script setup>
import {
  Checkmark,
  Close,
  LogoApple,
  LogoMicrosoft,
  Airplane,
  Wifi,
} from "kui-icons";
import { ref } from "vue";
const checked = ref(false);
</script>
```