DropdownMenu 下拉菜单

向下弹出的菜单列表，用于承载一组操作命令。

基础用法

import { DropdownMenu, MenuItem, MenuDivider, MenuGroup } from '@airo-ui/react'

function Demo() {
  return (
    <DropdownMenu triggerContent={<button>打开菜单</button>}>
      <MenuItem onClick={() => console.log('操作1')}>操作 1</MenuItem>
      <MenuItem onClick={() => console.log('操作2')}>操作 2</MenuItem>
      <MenuDivider />
      <MenuItem onClick={() => console.log('操作3')}>操作 3</MenuItem>
    </DropdownMenu>
  )
}

受控模式

import { useState } from 'react'
import { DropdownMenu, MenuItem } from '@airo-ui/react'

function Demo() {
  const [open, setOpen] = useState(false)

  return (
    <DropdownMenu
      open={open}
      onOpenChange={setOpen}
      triggerContent={<button>{open ? '已打开' : '点击打开'}</button>}
    >
      <MenuItem onClick={() => { setOpen(false); console.log('操作1') }}>
        操作 1
      </MenuItem>
    </DropdownMenu>
  )
}

触发方式

import { DropdownMenu, MenuItem } from '@airo-ui/react'

function Demo() {
  return (
    <>
      <DropdownMenu trigger="click" triggerContent={<button>点击</button>}>
        <MenuItem>点击触发</MenuItem>
      </DropdownMenu>
      <DropdownMenu trigger="hover" triggerContent={<button>悬停</button>}>
        <MenuItem>悬停触发</MenuItem>
      </DropdownMenu>
      <DropdownMenu trigger="contextmenu" triggerContent={<button>右键</button>}>
        <MenuItem>右键触发</MenuItem>
      </DropdownMenu>
    </>
  )
}

弹出位置

import { DropdownMenu, MenuItem } from '@airo-ui/react'

function Demo() {
  return (
    <>
      <DropdownMenu placement="bottom-start" triggerContent={<button>左下</button>}>
        <MenuItem>选项 1</MenuItem>
      </DropdownMenu>
      <DropdownMenu placement="bottom-end" triggerContent={<button>右下</button>}>
        <MenuItem>选项 1</MenuItem>
      </DropdownMenu>
      <DropdownMenu placement="top-start" triggerContent={<button>左上</button>}>
        <MenuItem>选项 1</MenuItem>
      </DropdownMenu>
    </>
  )
}

危险操作

import { DropdownMenu, MenuItem, MenuDivider } from '@airo-ui/react'

function Demo() {
  return (
    <DropdownMenu triggerContent={<button>操作</button>}>
      <MenuItem>编辑</MenuItem>
      <MenuItem>复制</MenuItem>
      <MenuDivider />
      <MenuItem danger onClick={() => console.log('删除')}>
        删除
      </MenuItem>
    </DropdownMenu>
  )
}

分组

import { DropdownMenu, MenuItem, MenuGroup } from '@airo-ui/react'

function Demo() {
  return (
    <DropdownMenu triggerContent={<button>文件</button>}>
      <MenuGroup label="编辑">
        <MenuItem>剪切</MenuItem>
        <MenuItem>复制</MenuItem>
      </MenuGroup>
      <MenuGroup label="视图">
        <MenuItem>放大</MenuItem>
        <MenuItem>缩小</MenuItem>
      </MenuGroup>
    </DropdownMenu>
  )
}

禁用项

import { DropdownMenu, MenuItem } from '@airo-ui/react'

function Demo() {
  return (
    <DropdownMenu triggerContent={<button>操作</button>}>
      <MenuItem onClick={() => console.log('ok')}>可用项</MenuItem>
      <MenuItem disabled>禁用项</MenuItem>
    </DropdownMenu>
  )
}

API

DropdownMenu Props

名称	类型	默认值	说明
open	boolean	—	受控模式是否打开
onOpenChange	(open: boolean) => void	—	打开状态变化时触发
trigger	'click' | 'contextmenu' | 'hover'	'click'	触发方式
placement	'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end'	'bottom-start'	弹出位置
disabled	boolean	false	是否禁用
autoClose	boolean	true	点击菜单项后是否自动关闭
triggerContent	ReactNode	—	触发元素的内容
children	ReactNode	—	菜单项子元素
onOpen	() => void	—	打开时触发
onClose	() => void	—	关闭时触发

MenuItem Props

名称	类型	默认值	说明
label	string	—	菜单项文本
disabled	boolean	false	是否禁用
danger	boolean	false	是否为危险操作
icon	string	—	图标
accelerator	string	—	快捷键提示
children	ReactNode	—	菜单项内容
onClick	(e: MouseEvent) => void	—	点击时触发

MenuGroup Props

名称	类型	默认值	说明
label	string	—	分组标题
children	ReactNode	—	分组内容

MenuDivider

菜单分割线组件，无 Props。