介绍
本文档主要用于描述 ShadcnSwitch 组件的一些特性和用法。
用法
查看代码
vue
<template>
<ShadcnSwitch v-model="checked" :dark="darkMode" />
</template>
<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'
const { isDark } = useData()
const darkMode = computed(() => isDark.value)
const checked = ref(false)
</script>类型 (type)
查看代码
vue
<template>
<ShadcnSwitch v-model="checked" type="success" :dark="darkMode" />
<ShadcnSwitch v-model="checked" type="warning" :dark="darkMode" />
<ShadcnSwitch v-model="checked" type="error" :dark="darkMode" />
<ShadcnSwitch v-model="checked" type="primary" :dark="darkMode" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checked = ref(false)
</script>尺寸 (size)
查看代码
vue
<template>
<ShadcnSwitch v-model="checked" size="small" :dark="darkMode" />
<ShadcnSwitch v-model="checked" size="default" :dark="darkMode" />
<ShadcnSwitch v-model="checked" size="large" :dark="darkMode" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checked = ref(false)
</script>禁用 (disabled)
查看代码
vue
<template>
<ShadcnSwitch v-model="checked" disabled :dark="darkMode" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checked = ref(false)
</script>自定义 (slot)
查看代码
vue
<template>
<ShadcnSwitch v-model="checked" :dark="darkMode">
<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" :dark="darkMode">
<template #open>OFF</template>
<template #close>ON</template>
</ShadcnSwitch>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checked2 = ref(null)
</script>液态玻璃效果 (glass)
查看代码
vue
<template>
<div :class="['p-6 rounded-lg', isDark ? 'bg-gradient-to-r from-blue-900 to-indigo-900' : 'bg-gradient-to-r from-blue-400 to-indigo-400']">
<div class="flex flex-col gap-4">
<ShadcnSwitch v-model="switchValue1" glass :dark="isDark" />
<ShadcnSwitch v-model="switchValue2" glass type="success" :dark="isDark" />
<ShadcnSwitch v-model="switchValue3" glass type="warning" :dark="isDark" />
<ShadcnSwitch v-model="switchValue4" glass type="error" :dark="isDark" />
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const isDark = ref(false)
const switchValue1 = ref(true)
const switchValue2 = ref(false)
const switchValue3 = ref(true)
const switchValue4 = ref(false)
</script>