chore: Add DropdownMenuRadioItem and DropdownMenuCheckboxItem to demo

This commit is contained in:
rev4324 2023-08-29 22:57:17 +02:00
parent a5c63d3e4a
commit 4a553b26f2

View File

@ -15,11 +15,15 @@ import {
UserPlus, UserPlus,
Users, Users,
} from 'lucide-vue-next' } from 'lucide-vue-next'
import { ref } from 'vue'
import { Button } from '@/registry/default/ui/button' import { Button } from '@/registry/default/ui/button'
import { import {
DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel,
DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger,
} from '@/registry/default/ui/dropdown-menu' } from '@/registry/default/ui/dropdown-menu'
const dark = ref(true)
const radio = ref('top')
</script> </script>
<template> <template>
@ -103,6 +107,22 @@ import {
<span>API</span> <span>API</span>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuCheckboxItem v-model:checked="dark">
<span>Dark</span>
<DropdownMenuShortcut>D</DropdownMenuShortcut>
</DropdownMenuCheckboxItem>
<DropdownMenuRadioGroup v-model="radio">
<DropdownMenuRadioItem value="top">
Top
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="bottom">
Bottom
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="right">
Right
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
<DropdownMenuSeparator />
<DropdownMenuItem> <DropdownMenuItem>
<LogOut class="mr-2 h-4 w-4" /> <LogOut class="mr-2 h-4 w-4" />
<span>Log out</span> <span>Log out</span>