React 组件

UGDropdownMenu 下拉菜单

UGDropdownMenu 适合承载行操作、更多菜单和补充动作入口。

导入方式

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

tsx

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

变体预览

基础操作菜单与右对齐菜单。

状态展示

适用于普通操作与危险操作的区分。

危险项建议配合 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>
  )
}

Props

属性	类型	默认值	说明
align	'start' \| 'end'	'start'	设置弹层与触发器的对齐方式。
destructive	boolean	false	为菜单项应用危险操作样式。
className	string	—	扩展菜单、触发器与菜单项样式。