菜单组件。一般在 Menubar、ContextMenu、Dropdown 组件中使用。
import { Menu } from '@antv/x6-react-components'
import '@antv/x6-react-components/es/menu/style/index.css'
const MenuItem = Menu.Item
const SubMenu = Menu.SubMenu
const Divider = Menu.Divider
<Menu hasIcon={true} onClick={this.onMenuClick}>
<MenuItem onClick={this.onMenuItemClick} name="undo" icon={<UndoOutlined />} hotkey="Cmd+Z" text="Undo" />
<MenuItem name="redo" icon={<RedoOutlined />} hotkey="Cmd+Shift+Z" text="Redo" />
<Divider />
<MenuItem name="cut" icon={<ScissorOutlined />} hotkey="Cmd+X" text="Cut" />
<MenuItem name="copy" icon={<CopyOutlined />} hotkey="Cmd+C" text="Copy" />
<MenuItem name="paste" icon={<SnippetsOutlined />} hotkey="Cmd+V" disabled={true} text="Paste" />
<MenuItem name="delete" icon={<DeleteOutlined />} hotkey="Delete" text="Delete" />
<Divider />
<SubMenu text="Appearance" icon={<ControlOutlined />}>
<MenuItem name="zen" icon={<DesktopOutlined />} hotkey="Cmd+K Z" text="Zen Mode" />
<MenuItem name="fullscreen" icon={<FullscreenOutlined />} hotkey="Cmd+Shift+F" text="Full Screen" />
<Divider />
<MenuItem name="side-bar" text="Show Side Bar" />
<MenuItem name="status-bar" text="Show Status Bar" />
<MenuItem name="activity-bar" text="Show Activity Bar" />
<MenuItem name="editor-area" text="Show Editor Area" />
<MenuItem name="show-panel" text="Show Panel" />
</SubMenu>
</Menu>
参数 | 说明 | 类型 | 默认值 |
---|
className | 自定义的样式名 | string | - |
hasIcon | 是否包含 Icon | boolean | false |
onClick | 点击 MenuItem 调用此函数 | (name: string) => void | - |
registerHotkey | 注册快捷键 | (hotkey: string, handler: () => void) => void | - |
unregisterHotkey | 取消注册快捷键 | (hotkey: string, handler: () => void) => void | - |
参数 | 说明 | 类型 | 默认值 |
---|
className | 自定义的样式名 | string | - |
name | 菜单名称(唯一标识),在 Menu 的 onClick 回调中使用,如果不设置 name 属性,onClick 将不会被调用。 | string | - |
icon | 菜单图标 | ReactNode | - |
text | 菜单文本 | string | - |
hotkey | 菜单快捷键 | string | - |
active | 是否被激活(显示鼠标 Hover 的背景) | boolean | false |
hidden | 是否隐藏 | boolean | false |
disabled | 是否被禁用 | boolean | false |
onClick | 点击 MenuItem 调用此函数 | () => void | - |
children | 额外的子组件 | ReactNode | - |
参数 | 说明 | 类型 | 默认值 |
---|
className | 自定义的样式名 | string | - |
name | 菜单名称(唯一标识),在 Menu 的 onClick 回调用使用 | string | - |
icon | 菜单图标 | ReactNode | - |
text | 菜单文本 | string | - |
hotkey | 菜单快捷键 | string | - |
active | 是否被激活(显示鼠标 Hover 的背景和子菜单) | boolean | false |
hidden | 是否隐藏 | boolean | false |
disabled | 是否被禁用 | boolean | false |
onClick | 点击 MenuItem 调用此函数 | () => void | - |
菜单项分割线。