shadcn-vue/apps/www/registry/default/example/DropdownMenuRadioGroup.vue
2024-11-21 11:52:31 +08:00

41 lines
1.0 KiB
Vue

<script lang="ts" setup>
import { Button } from '@/lib/registry/default/ui/button'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/lib/registry/default/ui/dropdown-menu'
import { ref } from 'vue'
const position = ref('bottom')
</script>
<template>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="outline">
Open
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent class="w-56">
<DropdownMenuLabel>Panel Position</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup v-model="position">
<DropdownMenuRadioItem value="top">
Top
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="bottom">
Bottom
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="right">
Right
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
</template>