介绍
本文档主要用于描述 ShadcnSwitch 组件的一些特性和用法。
用法
查看代码
vue
<template>
<ShadcnSwitch v-model="checked" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checked = ref(false)
</script>类型 (type)
查看代码
vue
<template>
<ShadcnSwitch v-model="checked" type="success" />
<ShadcnSwitch v-model="checked" type="warning" />
<ShadcnSwitch v-model="checked" type="error" />
<ShadcnSwitch v-model="checked" type="primary" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checked = ref(false)
</script>尺寸 (size)
查看代码
vue
<template>
<ShadcnSwitch v-model="checked" size="small" />
<ShadcnSwitch v-model="checked" size="default" />
<ShadcnSwitch v-model="checked" size="large" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checked = ref(false)
</script>禁用 (disabled)
查看代码
vue
<template>
<ShadcnSwitch v-model="checked" disabled />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checked = ref(false)
</script>自定义 (slot)
查看代码
vue
<template>
<ShadcnSwitch v-model="checked">
<template #open>ON</template>
<template #close>OFF</template>
</ShadcnSwitch>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checked = ref(false)
</script>自定义值 (true-value, false-value)
查看代码
vue
<template>
<div>Null Value: {{ checked2 }}</div>
<ShadcnSwitch v-model="checked2" true-value="ON" false-value="OFF">
<template #open>OFF</template>
<template #close>ON</template>
</ShadcnSwitch>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checked2 = ref(null)
</script>