@ug666/react 文档演示

Dropdown 下拉菜单

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

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { DropdownMenu, DropdownTrigger, DropdownContent, DropdownItem, DropdownSeparator } from '@ug666/react'

变体预览

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

状态展示

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

危险项建议配合 destructive

尺寸展示

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

代码示例

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

import { Button, DropdownContent, DropdownItem, DropdownMenu, DropdownSeparator, DropdownTrigger } from '@ug666/react'

export function RowActions() {
  return (
    <DropdownMenu>
      <DropdownTrigger>
        <Button variant="outline">操作</Button>
      </DropdownTrigger>
      <DropdownContent align="end">
        <DropdownItem>编辑</DropdownItem>
        <DropdownItem>归档</DropdownItem>
        <DropdownSeparator />
        <DropdownItem destructive>删除</DropdownItem>
      </DropdownContent>
    </DropdownMenu>
  )
}

Props 说明

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