介绍
本文档主要用于描述 ShadcnCheckbox 组件的一些特性和用法。
用法
查看代码
vue
<template>
<ShadcnCheckbox v-model="checked" value="Vue">Vue</ShadcnCheckbox>
<ShadcnCheckbox v-model="checked" value="Nuxt">Nuxt</ShadcnCheckbox>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checked = ref('Vue')
</script>禁用 (disabled)
查看代码
vue
<template>
<ShadcnCheckbox v-model="checked" value="Vue" disabled>Vue</ShadcnCheckbox>
<ShadcnCheckbox v-model="checked" value="Nuxt">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">Default</ShadcnCheckbox>
<ShadcnCheckbox v-model="checked" value="Small" size="small" @on-change="onChange">Small</ShadcnCheckbox>
<ShadcnCheckbox v-model="checked" value="Large" size="large" @on-change="onChange">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">Primary</ShadcnCheckbox>
<ShadcnCheckbox v-model="checked" value="Success" type="success">Success</ShadcnCheckbox>
<ShadcnCheckbox v-model="checked" value="Warning" type="warning">Warning</ShadcnCheckbox>
<ShadcnCheckbox v-model="checked" value="Error" type="error">Error</ShadcnCheckbox>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checked = ref('Primary')
</script>组 (group)
查看代码
vue
<template>
<ShadcnCheckboxGroup v-model="checkedGroup">
<ShadcnCheckbox value="Vue">Vue</ShadcnCheckbox>
<ShadcnCheckbox value="Nuxt">Nuxt</ShadcnCheckbox>
</ShadcnCheckboxGroup>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checkedGroup = ref(['Vue'])
</script>