组件

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
  • 单选组:DropdownMenuRadioGroupDropdownMenuRadioItem
  • 子菜单:DropdownMenuSubDropdownMenuSubTriggerDropdownMenuSubContent

使用建议

  • 危险操作使用 variant="destructive"
  • 同类动作优先用 DropdownMenuGroup 分组
  • 菜单里不要塞复杂表单,复杂交互请改用 PopoverDialog

继续阅读