组件
DropdownMenu
用于菜单动作、上下文操作和分组命令
DropdownMenu
DropdownMenu 适合承载一组低层级动作。
导入
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
Button,
} from "@downcity/ui";最小示例
import {
Button,
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
} from "@downcity/ui";
export function AgentMenu() {
return (
<DropdownMenu>
<DropdownMenuTrigger render={<Button size="sm" variant="ghost" />}>
更多操作
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuGroup>
<DropdownMenuItem>重命名</DropdownMenuItem>
<DropdownMenuItem>
复制 ID
<DropdownMenuShortcut>⌘C</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive">删除</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}可用能力
- 普通菜单项:
DropdownMenuItem - 分组:
DropdownMenuGroup - 标签:
DropdownMenuLabel - 分隔线:
DropdownMenuSeparator - 快捷键说明:
DropdownMenuShortcut - 复选项:
DropdownMenuCheckboxItem - 单选组:
DropdownMenuRadioGroup、DropdownMenuRadioItem - 子菜单:
DropdownMenuSub、DropdownMenuSubTrigger、DropdownMenuSubContent
使用建议
- 危险操作使用
variant="destructive" - 同类动作优先用
DropdownMenuGroup分组 - 菜单里不要塞复杂表单,复杂交互请改用
Popover或Dialog