Switch 开关 #

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

const checked = ref(true)
</script>

<template>
  <vi-switch v-model="checked" />
</template>

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

const checked1 = ref(true)
const checked2 = ref(true)
</script>

<template>
  <vi-flex gap="18px">
    <vi-switch v-model="checked1" on-color="#0000ff" />
    <vi-switch v-model="checked2" on-color="#13ce66" off-color="#ff0000" />
  </vi-flex>
</template>

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

const checked = ref(true)
</script>

<template>
  <vi-switch v-model="checked" disabled />
</template>

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

const checked = ref(true)
</script>

<template>
  <vi-switch v-model="checked" loading />
</template>

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

const checked = ref(true)
</script>

<template>
  <vi-switch v-model="checked" on-text="开" off-text="关" />
</template>

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

const checked = ref(true)
</script>

<template>
  <vi-switch v-model="checked" on-icon="Check" off-icon="Close" />
</template>

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

const checked1 = ref(true)
const checked2 = ref(true)
</script>

<template>
  <vi-flex gap="18px">
    <vi-switch v-model="checked1" on-text="开" off-text="关" is-inside />
    <vi-switch v-model="checked2" on-icon="Check" off-icon="Close" is-inside />
  </vi-flex>
</template>

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

const checked = ref(true)
</script>

<template>
  <vi-flex gap="18px">
    <vi-switch v-model="checked" on-icon="Check" off-icon="Close">
      <template #on>On</template>
      <template #off>Off</template>
    </vi-switch>
    <vi-switch
      v-model="checked"
      on-icon="Check"
      off-icon="Close"
      is-inside
      width="50px"
    >
      <template #on>On</template>
      <template #off>Off</template>
    </vi-switch>
  </vi-flex>
</template>

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

const value = ref(true)
</script>

<template>
  <vi-row>
    <vi-switch v-model="value" size="small" />
    <vi-switch v-model="value" />
    <vi-switch v-model="value" size="large" />
  </vi-row>
</template>