ContextMenu 右键菜单

带嵌套子菜单和图标的右键上下文菜单。

引入

import { ContextMenu } from 'asterui'

示例

基本右键菜单

右键点击元素以显示菜单。

</>

Right-click here

import { ContextMenu, notification } from 'asterui'

function App() {
  return (
      <ContextMenu onSelect={(key) => notification.info({ message: `Selected: ${key}` })}>
        <div className="p-8 bg-base-200 rounded-lg text-center cursor-context-menu">
          Right-click here
        </div>
        <ContextMenu.Item key="copy">Copy</ContextMenu.Item>
        <ContextMenu.Item key="paste">Paste</ContextMenu.Item>
        <ContextMenu.Item key="cut">Cut</ContextMenu.Item>
      </ContextMenu>
    )
}

export default App

数据驱动模式

使用 items 属性实现数据驱动的菜单。

</>

Right-click here

import { ContextMenu, notification } from 'asterui'

function App() {
  const items = [
    { key: 'copy', label: 'Copy' },
    { key: 'paste', label: 'Paste' },
    { key: 'cut', label: 'Cut' },
  ]
  
  return (
      <ContextMenu items={items} onSelect={(key) => notification.info({ message: `Selected: ${key}` })}>
        <div className="p-8 bg-base-200 rounded-lg text-center cursor-context-menu">
          Right-click here
        </div>
      </ContextMenu>
    )
}

export default App

带图标

带图标的菜单项。

</>

Right-click for options

import { ContextMenu, notification } from 'asterui'

function App() {
  const items = [
    { key: 'edit', label: 'Edit', icon: <span>✏️</span> },
    { key: 'duplicate', label: 'Duplicate', icon: <span>📋</span> },
    { key: 'delete', label: 'Delete', icon: <span>🗑️</span>, danger: true },
  ]
  
  return (
      <ContextMenu items={items} onSelect={(key) => notification.info({ message: `Selected: ${key}` })}>
        <div className="p-8 bg-base-200 rounded-lg text-center cursor-context-menu">
          Right-click for options
        </div>
      </ContextMenu>
    )
}

export default App

带分隔符

使用分隔符分隔菜单部分。

</>

Right-click for menu with sections

import { ContextMenu, notification } from 'asterui'

function App() {
  const items = [
    { key: 'undo', label: 'Undo' },
    { key: 'redo', label: 'Redo' },
    { key: 'divider1', divider: true },
    { key: 'cut', label: 'Cut' },
    { key: 'copy', label: 'Copy' },
    { key: 'paste', label: 'Paste' },
    { key: 'divider2', divider: true },
    { key: 'select-all', label: 'Select All' },
  ]
  
  return (
      <ContextMenu items={items} onSelect={(key) => notification.info({ message: `Selected: ${key}` })}>
        <div className="p-8 bg-base-200 rounded-lg text-center cursor-context-menu">
          Right-click for menu with sections
        </div>
      </ContextMenu>
    )
}

export default App

嵌套子菜单

带嵌套子菜单的菜单项。

</>

Right-click for nested menu

import { ContextMenu, notification } from 'asterui'

function App() {
  const items = [
    { key: 'new', label: 'New', children: [
      { key: 'new-file', label: 'File' },
      { key: 'new-folder', label: 'Folder' },
      { key: 'new-project', label: 'Project' },
    ]},
    { key: 'open', label: 'Open' },
    { key: 'save', label: 'Save' },
    { key: 'divider', divider: true },
    { key: 'export', label: 'Export', children: [
      { key: 'export-pdf', label: 'PDF' },
      { key: 'export-png', label: 'PNG' },
      { key: 'export-svg', label: 'SVG' },
    ]},
  ]
  
  return (
      <ContextMenu items={items} onSelect={(key) => notification.info({ message: `Selected: ${key}` })}>
        <div className="p-8 bg-base-200 rounded-lg text-center cursor-context-menu">
          Right-click for nested menu
        </div>
      </ContextMenu>
    )
}

export default App

禁用项

某些菜单项可以被禁用。

</>

Right-click (some items disabled)

import { ContextMenu, notification } from 'asterui'

function App() {
  const items = [
    { key: 'copy', label: 'Copy' },
    { key: 'paste', label: 'Paste', disabled: true },
    { key: 'cut', label: 'Cut' },
    { key: 'delete', label: 'Delete', danger: true, disabled: true },
  ]
  
  return (
      <ContextMenu items={items} onSelect={(key) => notification.info({ message: `Selected: ${key}` })}>
        <div className="p-8 bg-base-200 rounded-lg text-center cursor-context-menu">
          Right-click (some items disabled)
        </div>
      </ContextMenu>
    )
}

export default App

API

ContextMenu

属性	描述	类型	默认值
children	右键点击时触发上下文菜单的元素	React.ReactNode	-
items	菜单项	ContextMenuItem[]	-
onSelect	选择项时的回调函数	(key: string) => void	-
disabled	上下文菜单是否被禁用	boolean	false
className	菜单的额外 CSS 类名	string	-
data-testid	用于测试的测试 ID	string	-

ContextMenuItem（用于 items 属性）

属性	描述	类型	默认值
key	项的唯一标识符	string	-
label	显示标签	React.ReactNode	-
icon	图标元素	React.ReactNode	-
disabled	禁用状态	boolean	false
danger	显示为危险/破坏性操作	boolean	false
divider	渲染为分隔符	boolean	false
children	子菜单项	ContextMenuItem[]	-
data-testid	用于测试的测试 ID	string	-

ContextMenu.Item（复合模式）

属性	描述	类型	默认值
key	项的唯一键（React key 属性）	string	-
children	项内容	React.ReactNode	-
icon	标签前显示的图标	React.ReactNode	-
disabled	项是否被禁用	boolean	false
danger	显示为危险/破坏性操作	boolean	false
data-testid	用于测试的测试 ID	string	-

ContextMenu.SubMenu（复合模式）

属性	描述	类型	默认值
key	子菜单的唯一键（React key 属性）	string	-
label	子菜单标签	React.ReactNode	-
icon	标签前显示的图标	React.ReactNode	-
disabled	子菜单是否被禁用	boolean	false
children	子菜单项	React.ReactNode	-
data-testid	用于测试的测试 ID	string	-

无障碍

• 按 Escape 键关闭菜单
• 在外部点击时关闭菜单
• 菜单项可通过键盘导航
• 禁用的项会正确宣布