介绍
本文档主要用于描述 ShadcnCheckbox 组件的一些特性和用法。
用法
查看代码
vue
<template>
<ShadcnCheckbox v-model="checked" value="Vue" :dark="darkMode">Vue</ShadcnCheckbox>
<ShadcnCheckbox v-model="checked" value="Nuxt" :dark="darkMode">Nuxt</ShadcnCheckbox>
</template>
<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'
const { isDark } = useData()
const darkMode = computed(() => isDark.value)
const checked = ref('Vue')
</script>禁用 (disabled)
查看代码
vue
<template>
<ShadcnCheckbox v-model="checked" value="Vue" disabled :dark="darkMode">Vue</ShadcnCheckbox>
<ShadcnCheckbox v-model="checked" value="Nuxt" :dark="darkMode">Nuxt</ShadcnCheckbox>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checked = ref('Vue')
</script>尺寸 (size)
查看代码
vue
<template>
<ShadcnCheckbox v-model="checked" value="Default" size="default" @on-change="onChange" :dark="darkMode">Default</ShadcnCheckbox>
<ShadcnCheckbox v-model="checked" value="Small" size="small" @on-change="onChange" :dark="darkMode">Small</ShadcnCheckbox>
<ShadcnCheckbox v-model="checked" value="Large" size="large" @on-change="onChange" :dark="darkMode">Large</ShadcnCheckbox>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checked = ref('Default')
</script>类型 (type)
查看代码
vue
<template>
<ShadcnCheckbox v-model="checked" value="Primary" type="primary" :dark="darkMode">Primary</ShadcnCheckbox>
<ShadcnCheckbox v-model="checked" value="Success" type="success" :dark="darkMode">Success</ShadcnCheckbox>
<ShadcnCheckbox v-model="checked" value="Warning" type="warning" :dark="darkMode">Warning</ShadcnCheckbox>
<ShadcnCheckbox v-model="checked" value="Error" type="error" :dark="darkMode">Error</ShadcnCheckbox>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checked = ref('Primary')
</script>组 (group)
查看代码
vue
<template>
<ShadcnCheckboxGroup v-model="checkedGroup" :dark="darkMode">
<ShadcnCheckbox value="Vue" :dark="darkMode">Vue</ShadcnCheckbox>
<ShadcnCheckbox value="Nuxt" :dark="darkMode">Nuxt</ShadcnCheckbox>
</ShadcnCheckboxGroup>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checkedGroup = ref(['Vue'])
</script>全选 / 半选 (indeterminate)
液态玻璃效果 (glass)
查看代码
vue
<template>
<div class="space-y-6">
<div :class="['p-6 rounded-lg', darkMode ? 'bg-gradient-to-r from-purple-900 to-pink-900' : 'bg-gradient-to-r from-purple-400 to-pink-400']">
<div class="flex flex-col gap-4">
<div class="flex gap-4">
<ShadcnCheckbox v-model="glassValue1" value="1" glass :dark="darkMode">选项 1</ShadcnCheckbox>
<ShadcnCheckbox v-model="glassValue2" value="2" glass type="success" :dark="darkMode">选项 2</ShadcnCheckbox>
<ShadcnCheckbox v-model="glassValue3" value="3" glass type="warning" :dark="darkMode">选项 3</ShadcnCheckbox>
<ShadcnCheckbox v-model="glassValue4" value="4" glass type="error" :dark="darkMode">选项 4</ShadcnCheckbox>
</div>
<div>
<p :class="['text-sm mb-2', darkMode ? 'text-gray-200' : 'text-gray-700']">复选框组</p>
<ShadcnCheckboxGroup v-model="glassGroupValue" glass :dark="darkMode">
<ShadcnCheckbox value="apple">苹果</ShadcnCheckbox>
<ShadcnCheckbox value="banana">香蕉</ShadcnCheckbox>
<ShadcnCheckbox value="orange">橙子</ShadcnCheckbox>
<ShadcnCheckbox value="grape">葡萄</ShadcnCheckbox>
</ShadcnCheckboxGroup>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useData } from 'vitepress'
import { computed } from 'vue'
const { isDark } = useData()
const darkMode = computed(() => isDark.value)
const glassValue1 = ref(null)
const glassValue2 = ref(null)
const glassValue3 = ref(null)
const glassValue4 = ref(null)
const glassGroupValue = ref([])
</script>