介绍
本文档主要用于描述 ShadcnRadio 组件的一些特性和用法。
用法
查看代码
vue
<template>
<ShadcnRadio v-model="checked" value="ON" :dark="darkMode">ON</ShadcnRadio>
<ShadcnRadio v-model="checked" value="OFF" :dark="darkMode">OFF</ShadcnRadio>
</template>
<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'
const { isDark } = useData()
const darkMode = computed(() => isDark.value)
const checked = ref('ON')
</script>禁用 (disabled)
查看代码
vue
<template>
<ShadcnRadio v-model="checked" value="ON" disabled :dark="darkMode">ON</ShadcnRadio>
<ShadcnRadio v-model="checked" value="OFF" :dark="darkMode">OFF</ShadcnRadio>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checked = ref('ON')
</script>尺寸 (size)
查看代码
vue
<template>
<ShadcnRadio v-model="checked" value="Default" size="default" :dark="darkMode">Default</ShadcnRadio>
<ShadcnRadio v-model="checked" value="Small" size="small" :dark="darkMode">Small</ShadcnRadio>
<ShadcnRadio v-model="checked" value="Large" size="large" :dark="darkMode">Large</ShadcnRadio>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checked = ref('Default')
</script>类型 (type)
查看代码
vue
<template>
<ShadcnRadio v-model="checked" value="Primary" type="primary" :dark="darkMode">Primary</ShadcnRadio>
<ShadcnRadio v-model="checked" value="Success" type="success" :dark="darkMode">Success</ShadcnRadio>
<ShadcnRadio v-model="checked" value="Warning" type="warning" :dark="darkMode">Warning</ShadcnRadio>
<ShadcnRadio v-model="checked" value="Error" type="error" :dark="darkMode">Error</ShadcnRadio>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checked = ref('Primary')
</script>组 (group)
查看代码
vue
<template>
<ShadcnRadioGroup v-model="checkedGroup" :dark="darkMode">
<ShadcnRadio value="ON" :dark="darkMode">ON</ShadcnRadio>
<ShadcnRadio value="OFF" :dark="darkMode">OFF</ShadcnRadio>
<ShadcnRadio value="Disabled" disabled :dark="darkMode">Disabled</ShadcnRadio>
</ShadcnRadioGroup>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const checkedGroup = ref('ON')
</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']">
<ShadcnRadioGroup v-model="radioValue" glass :dark="isDark">
<ShadcnRadio value="1">选项 1</ShadcnRadio>
<ShadcnRadio value="2" type="success">选项 2</ShadcnRadio>
<ShadcnRadio value="3" type="warning">选项 3</ShadcnRadio>
<ShadcnRadio value="4" type="error">选项 4</ShadcnRadio>
</ShadcnRadioGroup>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const isDark = ref(false)
const radioValue = ref('1')
</script>