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