React 组件

UGDropdownMenu 下拉菜单

UGDropdownMenu 适合承载行操作、更多菜单和补充动作入口；菜单会限制在可视区域内，并完整执行打开与关闭动效。

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGDropdownMenu, UGDropdownTrigger, UGDropdownContent, UGDropdownItem, UGDropdownRadioItem, UGDropdownSeparator } from '@ug666/ui-react'

变体预览

支持点击、Enter、Space 与方向键打开；菜单内使用方向键移动，Escape 关闭并归还焦点。

状态展示

同时覆盖普通、禁用、危险和长文案菜单项；禁用项会被键盘导航跳过。

危险项建议配合 destructive

尺寸展示

可以搭配普通按钮、图标按钮或行尾菜单触发器使用。

代码示例

推荐用于卡片角标、表格行或工具栏二级动作。

tsx

import { UGButton, UGDropdownContent, UGDropdownItem, UGDropdownMenu, UGDropdownSeparator, UGDropdownTrigger } from '@ug666/ui-react'

export function RowActions() {
  return (
    <UGDropdownMenu>
      <UGDropdownTrigger>
        <UGButton variant="outline">操作</UGButton>
      </UGDropdownTrigger>
      <UGDropdownContent align="end">
        <UGDropdownItem>编辑</UGDropdownItem>
        <UGDropdownItem>归档</UGDropdownItem>
        <UGDropdownSeparator />
        <UGDropdownItem destructive>删除</UGDropdownItem>
      </UGDropdownContent>
    </UGDropdownMenu>
  )
}

属性

属性	类型	默认值	说明
align	'start' \| 'end'	'start'	设置菜单与触发器的首选对齐方式；靠近视口边缘时会自动限制位置。
destructive	boolean	false	为菜单项应用危险操作样式。
checked	boolean	—	为单选菜单项声明当前选中状态，并同步可访问语义。
className	string	—	扩展菜单、触发器与菜单项样式。