syncfusion-react-context-menu

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion React Context Menu

实现Syncfusion React上下文菜单

Complete API Reference & Feature Guide

完整API参考与功能指南

When to Use This Skill

何时使用此技能

ALWAYS use this skill when users need to:

Install and configure Syncfusion React ContextMenu component
Create and manage menu items (text, icons, separators, nested menus, URLs)
Programmatically control menus using 15+ methods
Handle all 7 events with their respective event arguments
Customize appearance with CSS classes, themes, templates, animations
Bind data from local sources or dynamic data structures
Implement accessibility (keyboard navigation, ARIA, RTL, WCAG 2.2)
Manage dynamic menus (add, remove, show, hide, enable/disable)
Create context-specific actions (files, editors, workflows)

当用户需要以下操作时，请务必使用此技能：

安装和配置 Syncfusion React ContextMenu组件
创建和管理菜单项（文本、图标、分隔符、嵌套菜单、URL）
通过15+种方法以编程方式控制菜单
处理全部7种事件及其对应的事件参数
通过CSS类、主题、模板、动画自定义外观
从本地源或动态数据结构绑定数据
实现无障碍访问（键盘导航、ARIA、RTL、WCAG 2.2）
管理动态菜单（添加、移除、显示、隐藏、启用/禁用）
创建上下文特定操作（文件、编辑器、工作流）

Getting Started

入门指南

📄 Read: references/getting-started.md

Package installation (
```
@syncfusion/ej2-react-navigations
```
)
Development environment setup (Vite, Create React App)
CSS stylesheet imports and theme configuration
Basic ContextMenu implementation
Running and testing the application

📄 阅读： references/getting-started.md

包安装（
```
@syncfusion/ej2-react-navigations
```
）
开发环境设置（Vite、Create React App）
CSS样式表导入和主题配置
基础ContextMenu实现
运行和测试应用

Component Properties Reference

组件属性参考

The ContextMenuComponent accepts 18+ configuration properties to control behavior, appearance, and interaction:

ContextMenuComponent支持18+种配置属性，用于控制行为、外观和交互：

Essential Properties

核心属性

target

(Required)

target

（必填）

Type:

string

CSS selector for the element that triggers the context menu (right-click or touch-hold).

<ContextMenuComponent target="#myElement" items={menuItems} />

Example: Trigger on specific element

function App() {
  return (
    <div>
      <div id="target">Right-click here</div>
      <ContextMenuComponent target="#target" items={menuItems} />
    </div>
  );
}

类型：

string

触发上下文菜单（右键点击或长按）的元素的CSS选择器。

<ContextMenuComponent target="#myElement" items={menuItems} />

示例： 在特定元素上触发

function App() {
  return (
    <div>
      <div id="target">右键点击此处</div>
      <ContextMenuComponent target="#target" items={menuItems} />
    </div>
  );
}

items

(Required)

items

（必填）

Type:

MenuItemModel[]

Array of menu items to display. Each item can have text, icons, nested items, separators, etc.

const menuItems: MenuItemModel[] = [
  { text: 'Cut' },
  { text: 'Copy' },
  { text: 'Paste' },
  { separator: true },
  {
    text: 'More',
    items: [
      { text: 'Properties' },
      { text: 'Delete' }
    ]
  }
];

<ContextMenuComponent target="#target" items={menuItems} />

类型：

MenuItemModel[]

要显示的菜单项数组。每个项可包含文本、图标、嵌套项、分隔符等。

const menuItems: MenuItemModel[] = [
  { text: '剪切' },
  { text: '复制' },
  { text: '粘贴' },
  { separator: true },
  {
    text: '更多',
    items: [
      { text: '属性' },
      { text: '删除' }
    ]
  }
];

<ContextMenuComponent target="#target" items={menuItems} />

Display & Animation Properties

显示与动画属性

animationSettings

animationSettings

Type:

MenuAnimationSettingsModel

Configure menu opening/closing animation effects.

Properties:

```
effect
```
: Animation type (None, SlideDown, ZoomIn, FadeIn)
```
duration
```
: Animation time in milliseconds (default: 400)
```
easing
```
: CSS easing function (default: ease)

const animationSettings = {
  effect: 'FadeIn',
  duration: 300,
  easing: 'ease-out'
};

<ContextMenuComponent
  target="#target"
  items={menuItems}
  animationSettings={animationSettings}
/>

Available Effects:

Effect	Description
`None`	No animation
`SlideDown`	Slide down from top
`ZoomIn`	Zoom in effect
`FadeIn`	Fade in opacity

类型：

MenuAnimationSettingsModel

配置菜单打开/关闭的动画效果。

属性：

```
effect
```
: 动画类型（None、SlideDown、ZoomIn、FadeIn）
```
duration
```
: 动画时长（毫秒，默认：400）
```
easing
```
: CSS缓动函数（默认：ease）

const animationSettings = {
  effect: 'FadeIn',
  duration: 300,
  easing: 'ease-out'
};

<ContextMenuComponent
  target="#target"
  items={menuItems}
  animationSettings={animationSettings}
/>

可用效果：

效果	描述
`None`	无动画
`SlideDown`	从顶部滑下
`ZoomIn`	放大效果
`FadeIn`	淡入效果

cssClass

cssClass

Type:

string

Add custom CSS classes to the ContextMenu wrapper for custom styling.

<ContextMenuComponent
  target="#target"
  items={menuItems}
  cssClass="custom-menu dark-theme"
/>

类型：

string

为ContextMenu容器添加自定义CSS类，用于自定义样式。

<ContextMenuComponent
  target="#target"
  items={menuItems}
  cssClass="custom-menu dark-theme"
/>

enableScrolling

enableScrolling

Type:

boolean

(default: false)

Enable scrolling when menu height exceeds available space.

<ContextMenuComponent
  target="#target"
  items={largeMenuList}
  enableScrolling={true}
/>

类型：

boolean

（默认：false）

当菜单高度超过可用空间时启用滚动。

<ContextMenuComponent
  target="#target"
  items={largeMenuList}
  enableScrolling={true}
/>

Interaction Properties

交互属性

filter

filter

Type:

string

CSS selector for specific elements inside the target that should trigger the context menu. Use to limit context menu to certain child elements.

// Context menu only appears on table rows, not the entire table
<ContextMenuComponent
  target="#table"
  filter="tr"
  items={menuItems}
/>

类型：

string

目标元素内触发上下文菜单的特定元素的CSS选择器。用于将上下文菜单限制为特定子元素。

// 仅在表格行上显示上下文菜单，而非整个表格
<ContextMenuComponent
  target="#table"
  filter="tr"
  items={menuItems}
/>

hoverDelay

hoverDelay

Type:

number

(default: 400)

Milliseconds to wait before displaying submenu on hover.

<ContextMenuComponent
  target="#target"
  items={menuItems}
  hoverDelay={500}  // 500ms before submenu appears
/>

类型：

number

（默认：400）

悬停后显示子菜单前等待的毫秒数。

<ContextMenuComponent
  target="#target"
  items={menuItems}
  hoverDelay={500}  // 500ms后显示子菜单
/>

showItemOnClick

showItemOnClick

Type:

boolean

(default: false)

Force submenus to open only on click (not on hover). When

true

, arrow key navigation is required to open submenus.

<ContextMenuComponent
  target="#target"
  items={menuItems}
  showItemOnClick={true}  // Submenus open on click only
/>

类型：

boolean

（默认：false）

强制子菜单仅在点击时打开（而非悬停）。设置为

true

时，需使用箭头键导航打开子菜单。

<ContextMenuComponent
  target="#target"
  items={menuItems}
  showItemOnClick={true}  // 子菜单仅在点击时打开
/>

Data & Content Properties

数据与内容属性

itemTemplate

itemTemplate

Type:

string | Function

Custom HTML template for menu items. Use template string with property placeholders (

${propertyName}

const template = `
  <div class="menu-item">
    <span class="${iconCss}"></span>
    <span>${text}</span>
    <span class="shortcut">${shortcut}</span>
  </div>
`;

<ContextMenuComponent
  target="#target"
  items={menuItems}
  itemTemplate={template}
/>

类型：

string | Function

菜单项的自定义HTML模板。使用带有属性占位符（

${propertyName}

）的模板字符串。

const template = `
  <div class="menu-item">
    <span class="${iconCss}"></span>
    <span>${text}</span>
    <span class="shortcut">${shortcut}</span>
  </div>
`;

<ContextMenuComponent
  target="#target"
  items={menuItems}
  itemTemplate={template}
/>

locale

locale

Type:

string

(default: 'en-US')

Set localization language for component. Overrides global culture setting.

<ContextMenuComponent
  target="#target"
  items={menuItems}
  locale="es-ES"  // Spanish localization
/>

类型：

string

（默认：'en-US'）

设置组件的本地化语言。覆盖全局文化设置。

<ContextMenuComponent
  target="#target"
  items={menuItems}
  locale="es-ES"  // 西班牙语本地化
/>

Security & State Properties

安全与状态属性

enableHtmlSanitizer

enableHtmlSanitizer

Type:

boolean

(default: true)

Enable HTML sanitization to prevent XSS attacks. Sanitizes untrusted HTML in menu items.

<ContextMenuComponent
  target="#target"
  items={menuItems}
  enableHtmlSanitizer={true}  // Sanitize HTML content
/>

类型：

boolean

（默认：true）

启用HTML sanitizer以防止XSS攻击。对菜单项中的不可信HTML进行清理。

<ContextMenuComponent
  target="#target"
  items={menuItems}
  enableHtmlSanitizer={true}  // 清理HTML内容
/>

enablePersistence

enablePersistence

Type:

boolean

(default: false)

Persist component state (expanded/collapsed state) across page reloads using browser storage.

<ContextMenuComponent
  target="#target"
  items={menuItems}
  enablePersistence={true}
/>

类型：

boolean

（默认：false）

使用浏览器存储在页面刷新后保留组件状态（展开/折叠状态）。

<ContextMenuComponent
  target="#target"
  items={menuItems}
  enablePersistence={true}
/>

enableRtl

enableRtl

Type:

boolean

(default: false)

Enable right-to-left (RTL) layout for Arabic, Hebrew, and other RTL languages.

<ContextMenuComponent
  target="#target"
  items={menuItems}
  enableRtl={true}
/>

类型：

boolean

（默认：false）

为阿拉伯语、希伯来语等RTL语言启用从右到左（RTL）布局。

<ContextMenuComponent
  target="#target"
  items={menuItems}
  enableRtl={true}
/>

Menu Item Model Properties

菜单项模型属性

Each menu item is configured using

MenuItemModel

interface with the following properties:

每个菜单项通过

MenuItemModel

接口配置，包含以下属性：

Text & Display

文本与显示

text

text

Type:

string

Display text for the menu item.

{ text: 'Cut' }
{ text: 'Copy' }

类型：

string

菜单项的显示文本。

{ text: '剪切' }
{ text: '复制' }

id

id

Type:

string

Unique identifier for the menu item. Use for identifying items in event handlers or programmatic operations.

{ id: 'cut-item', text: 'Cut' }
{ id: 'copy-item', text: 'Copy' }

类型：

string

菜单项的唯一标识符。用于在事件处理程序或编程操作中识别项。

{ id: 'cut-item', text: '剪切' }
{ id: 'copy-item', text: '复制' }

iconCss

iconCss

Type:

string

CSS class for icon display. Supports Syncfusion icons or custom icon classes.

{ text: 'Cut', iconCss: 'e-icons e-cut' }
{ text: 'Copy', iconCss: 'e-icons e-copy' }
{ text: 'Delete', iconCss: 'e-icons e-delete' }

类型：

string

用于显示图标的CSS类。支持Syncfusion图标或自定义图标类。

{ text: '剪切', iconCss: 'e-icons e-cut' }
{ text: '复制', iconCss: 'e-icons e-copy' }
{ text: '删除', iconCss: 'e-icons e-delete' }

Item Structure

项结构

items

items

Type:

MenuItemModel[]

Nested submenu items. Creates hierarchical menu structure.

{
  text: 'File',
  items: [
    { text: 'New' },
    { text: 'Open' },
    { text: 'Save' }
  ]
}

类型：

MenuItemModel[]

嵌套子菜单项。创建分层菜单结构。

{
  text: '文件',
  items: [
    { text: '新建' },
    { text: '打开' },
    { text: '保存' }
  ]
}

separator

separator

Type:

boolean

(default: false)

Render as a visual separator line instead of a clickable item.

const menuItems: MenuItemModel[] = [
  { text: 'Cut' },
  { text: 'Copy' },
  { separator: true },  // Visual divider
  { text: 'Delete' }
];

类型：

boolean

（默认：false）

渲染为视觉分隔线而非可点击项。

const menuItems: MenuItemModel[] = [
  { text: '剪切' },
  { text: '复制' },
  { separator: true },  // 视觉分隔符
  { text: '删除' }
];

Navigation

Custom Attributes

自定义属性

htmlAttributes

htmlAttributes

Type:

Record<string, string>

Add custom HTML attributes to menu item element.

{
  text: 'Download',
  htmlAttributes: {
    'data-action': 'download',
    'aria-label': 'Download file',
    'title': 'Download the file'
  }
}

类型：

Record<string, string>

为菜单项元素添加自定义HTML属性。

{
  text: '下载',
  htmlAttributes: {
    'data-action': 'download',
    'aria-label': '下载文件',
    'title': '下载文件'
  }
}

Menu Methods – Programmatic Control

菜单方法 – 编程控制

The ContextMenu exposes 15+ methods for runtime control and manipulation:

ContextMenu提供15+种方法用于运行时控制和操作：

Menu State Control

菜单状态控制

open(top: number, left: number, target?: HTMLElement): void

open(top: number, left: number, target?: HTMLElement): void

Programmatically open the context menu at specified coordinates.

Parameters:

```
top
```
: Vertical position (Y-coordinate in pixels)
```
left
```
: Horizontal position (X-coordinate in pixels)
```
target
```
: Optional HTML element for z-index calculation

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const openMenuAtClick = (event: React.MouseEvent) => {
    menuRef.current?.open(event.clientY, event.clientX);
  };

  return (
    <div>
      <button onClick={openMenuAtClick}>Open Menu</button>
      <ContextMenuComponent ref={menuRef} target="#target" items={menuItems} />
    </div>
  );
}

以编程方式在指定坐标处打开上下文菜单。

参数：

```
top
```
: 垂直位置（Y坐标，像素）
```
left
```
: 水平位置（X坐标，像素）
```
target
```
: 用于z-index计算的可选HTML元素

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const openMenuAtClick = (event: React.MouseEvent) => {
    menuRef.current?.open(event.clientY, event.clientX);
  };

  return (
    <div>
      <button onClick={openMenuAtClick}>打开菜单</button>
      <ContextMenuComponent ref={menuRef} target="#target" items={menuItems} />
    </div>
  );
}

close(): void

close(): void

Programmatically close the context menu.

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const closeMenu = () => {
    menuRef.current?.close();
  };

  const handleItemSelect = (args: MenuEventArgs) => {
    console.log('Selected:', args.item?.text);
    closeMenu();  // Close menu after selection
  };

  return (
    <ContextMenuComponent
      ref={menuRef}
      target="#target"
      items={menuItems}
      select={handleItemSelect}
    />
  );
}

以编程方式关闭上下文菜单。

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const closeMenu = () => {
    menuRef.current?.close();
  };

  const handleItemSelect = (args: MenuEventArgs) => {
    console.log('选中:', args.item?.text);
    closeMenu();  // 选中后关闭菜单
  };

  return (
    <ContextMenuComponent
      ref={menuRef}
      target="#target"
      items={menuItems}
      select={handleItemSelect}
    />
  );
}

Item Visibility Control

项可见性控制

showItems(items: string[], isUniqueId?: boolean): void

showItems(items: string[], isUniqueId?: boolean): void

Show menu items that were previously hidden.

Parameters:

```
items
```
: Array of item text or IDs to show
```
isUniqueId
```
: If true, treat items as unique IDs; if false, treat as text (default: false)

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const showDeleteOption = () => {
    menuRef.current?.showItems(['Delete', 'Rename']);
  };

  return (
    <div>
      <button onClick={showDeleteOption}>Show Options</button>
      <ContextMenuComponent ref={menuRef} target="#target" items={menuItems} />
    </div>
  );
}

显示之前隐藏的菜单项。

参数：

```
items
```
: 要显示的项文本或ID数组
```
isUniqueId
```
: 如果为true，将项视为唯一ID；如果为false，视为文本（默认：false）

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const showDeleteOption = () => {
    menuRef.current?.showItems(['删除', '重命名']);
  };

  return (
    <div>
      <button onClick={showDeleteOption}>显示选项</button>
      <ContextMenuComponent ref={menuRef} target="#target" items={menuItems} />
    </div>
  );
}

hideItems(items: string[], isUniqueId?: boolean): void

hideItems(items: string[], isUniqueId?: boolean): void

Hide specific menu items from display while keeping them in the menu structure.

Parameters:

```
items
```
: Array of item text or IDs to hide
```
isUniqueId
```
: If true, treat items as unique IDs

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  React.useEffect(() => {
    // Hide delete option for read-only mode
    if (isReadOnly) {
      menuRef.current?.hideItems(['Delete', 'Modify']);
    }
  }, [isReadOnly]);

  return (
    <ContextMenuComponent ref={menuRef} target="#target" items={menuItems} />
  );
}

隐藏特定菜单项，但保留在菜单结构中。

参数：

```
items
```
: 要隐藏的项文本或ID数组
```
isUniqueId
```
: 如果为true，将项视为唯一ID

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  React.useEffect(() => {
    // 只读模式下隐藏删除选项
    if (isReadOnly) {
      menuRef.current?.hideItems(['删除', '修改']);
    }
  }, [isReadOnly]);

  return (
    <ContextMenuComponent ref={menuRef} target="#target" items={menuItems} />
  );
}

Item State Management

项状态管理

enableItems(items: string[], enable: boolean, isUniqueId?: boolean): void

enableItems(items: string[], enable: boolean, isUniqueId?: boolean): void

Enable or disable menu items to control interactivity.

Parameters:

```
items
```
: Array of item text or IDs to modify
```
enable
```
: true to enable, false to disable
```
isUniqueId
```
: If true, treat items as unique IDs

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const disablePasteIfNoClipboard = async () => {
    const canPaste = await navigator.permissions.query({ name: 'clipboard-read' });
    if (canPaste.state === 'denied') {
      menuRef.current?.enableItems(['Paste'], false);
    }
  };

  React.useEffect(() => {
    disablePasteIfNoClipboard();
  }, []);

  return (
    <ContextMenuComponent
      ref={menuRef}
      target="#target"
      items={menuItems}
      beforeOpen={disablePasteIfNoClipboard}
    />
  );
}

启用或禁用菜单项以控制交互性。

参数：

```
items
```
: 要修改的项文本或ID数组
```
enable
```
: true为启用，false为禁用
```
isUniqueId
```
: 如果为true，将项视为唯一ID

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const disablePasteIfNoClipboard = async () => {
    const canPaste = await navigator.permissions.query({ name: 'clipboard-read' });
    if (canPaste.state === 'denied') {
      menuRef.current?.enableItems(['粘贴'], false);
    }
  };

  React.useEffect(() => {
    disablePasteIfNoClipboard();
  }, []);

  return (
    <ContextMenuComponent
      ref={menuRef}
      target="#target"
      items={menuItems}
      beforeOpen={disablePasteIfNoClipboard}
    />
  );
}

Item Manipulation

项操作

insertAfter(items: MenuItemModel[], text: string, isUniqueId?: boolean): void

insertAfter(items: MenuItemModel[], text: string, isUniqueId?: boolean): void

Insert new menu items after a specified target item.

Parameters:

```
items
```
: Array of new MenuItemModel items to insert
```
text
```
: Text or ID of target item to insert after
```
isUniqueId
```
: If true, treat text as unique ID

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const addSortByOption = () => {
    const newItems: MenuItemModel[] = [
      { text: 'Sort By Name' },
      { text: 'Sort By Date' }
    ];
    menuRef.current?.insertAfter(newItems, 'View');
  };

  return (
    <div>
      <button onClick={addSortByOption}>Add Sort Options</button>
      <ContextMenuComponent ref={menuRef} target="#target" items={menuItems} />
    </div>
  );
}

在指定目标项之后插入新菜单项。

参数：

```
items
```
: 要插入的新MenuItemModel项数组
```
text
```
: 目标项的文本或ID
```
isUniqueId
```
: 如果为true，将text视为唯一ID

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const addSortByOption = () => {
    const newItems: MenuItemModel[] = [
      { text: '按名称排序' },
      { text: '按日期排序' }
    ];
    menuRef.current?.insertAfter(newItems, '查看');
  };

  return (
    <div>
      <button onClick={addSortByOption}>添加排序选项</button>
      <ContextMenuComponent ref={menuRef} target="#target" items={menuItems} />
    </div>
  );
}

insertBefore(items: MenuItemModel[], text: string, isUniqueId?: boolean): void

insertBefore(items: MenuItemModel[], text: string, isUniqueId?: boolean): void

Insert new menu items before a specified target item.

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const addPremiumOptions = () => {
    const premiumItems: MenuItemModel[] = [
      { text: 'Premium Feature 1' },
      { text: 'Premium Feature 2', iconCss: 'e-icons e-star' }
    ];
    // Insert before 'Delete' option
    menuRef.current?.insertBefore(premiumItems, 'Delete');
  };

  React.useEffect(() => {
    if (user.isPremium) {
      addPremiumOptions();
    }
  }, [user.isPremium]);

  return (
    <ContextMenuComponent ref={menuRef} target="#target" items={menuItems} />
  );
}

在指定目标项之前插入新菜单项。

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const addPremiumOptions = () => {
    const premiumItems: MenuItemModel[] = [
      { text: '高级功能1' },
      { text: '高级功能2', iconCss: 'e-icons e-star' }
    ];
    // 在'删除'选项之前插入
    menuRef.current?.insertBefore(premiumItems, '删除');
  };

  React.useEffect(() => {
    if (user.isPremium) {
      addPremiumOptions();
    }
  }, [user.isPremium]);

  return (
    <ContextMenuComponent ref={menuRef} target="#target" items={menuItems} />
  );
}

removeItems(items: string[], isUniqueId?: boolean): void

removeItems(items: string[], isUniqueId?: boolean): void

Remove menu items from the menu.

Parameters:

```
items
```
: Array of item text or IDs to remove
```
isUniqueId
```
: If true, treat items as unique IDs

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const removeRestrictedActions = () => {
    menuRef.current?.removeItems(['Delete', 'Export', 'Archive']);
  };

  React.useEffect(() => {
    if (userRole === 'viewer') {
      removeRestrictedActions();
    }
  }, [userRole]);

  return (
    <ContextMenuComponent
      ref={menuRef}
      target="#target"
      items={menuItems}
      created={removeRestrictedActions}
    />
  );
}

从菜单中移除菜单项。

参数：

```
items
```
: 要移除的项文本或ID数组
```
isUniqueId
```
: 如果为true，将项视为唯一ID

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const removeRestrictedActions = () => {
    menuRef.current?.removeItems(['删除', '导出', '归档']);
  };

  React.useEffect(() => {
    if (userRole === '查看者') {
      removeRestrictedActions();
    }
  }, [userRole]);

  return (
    <ContextMenuComponent
      ref={menuRef}
      target="#target"
      items={menuItems}
      created={removeRestrictedActions}
    />
  );
}

Item Queries

项查询

getItemIndex(item: MenuItem | string, isUniqueId?: boolean): number[]

getItemIndex(item: MenuItem | string, isUniqueId?: boolean): number[]

Get the index/indices of a menu item. Returns array because item can exist at multiple levels (for nested items).

Parameters:

```
item
```
: MenuItem object or text/ID string to find
```
isUniqueId
```
: If true, treat item as unique ID

Returns:

number[]

- Array of index numbers representing item position

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const findItemPosition = () => {
    const indices = menuRef.current?.getItemIndex('Copy');
    console.log('Copy is at index:', indices);  // Output: [1] or [0, 1] for nested
    
    const nestedIndices = menuRef.current?.getItemIndex('Open', false);
    console.log('Open is at indices:', nestedIndices);  // Output: [0, 1] for nested
  };

  return (
    <div>
      <button onClick={findItemPosition}>Find Item</button>
      <ContextMenuComponent ref={menuRef} target="#target" items={menuItems} />
    </div>
  );
}

获取菜单项的索引。返回数组，因为项可能存在于多个层级（嵌套项）。

参数：

```
item
```
: 要查找的MenuItem对象或文本/ID字符串
```
isUniqueId
```
: 如果为true，将item视为唯一ID

返回：

number[]

- 表示项位置的索引数组

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const findItemPosition = () => {
    const indices = menuRef.current?.getItemIndex('复制');
    console.log('复制的索引:', indices);  // 输出: [1] 或嵌套项的 [0, 1]
    
    const nestedIndices = menuRef.current?.getItemIndex('打开', false);
    console.log('打开的索引:', nestedIndices);  // 输出: 嵌套项的 [0, 1]
  };

  return (
    <div>
      <button onClick={findItemPosition}>查找项位置</button>
      <ContextMenuComponent ref={menuRef} target="#target" items={menuItems} />
    </div>
  );
}

setItem(item: MenuItem, id?: string, isUniqueId?: boolean): void

setItem(item: MenuItem, id?: string, isUniqueId?: boolean): void

Update an existing menu item's properties.

Parameters:

```
item
```
: MenuItem object with updated properties
```
id
```
: Text or ID of item to update
```
isUniqueId
```
: If true, treat id as unique ID

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const updateDeleteItemStyle = () => {
    const updatedItem: MenuItemModel = {
      text: 'Delete',
      iconCss: 'e-icons e-delete',
      htmlAttributes: {
        'class': 'dangerous-action'
      }
    };
    menuRef.current?.setItem(updatedItem, 'Delete');
  };

  return (
    <div>
      <button onClick={updateDeleteItemStyle}>Update Delete Item</button>
      <ContextMenuComponent ref={menuRef} target="#target" items={menuItems} />
    </div>
  );
}

更新现有菜单项的属性。

参数：

```
item
```
: 包含更新属性的MenuItem对象
```
id
```
: 要更新的项的文本或ID
```
isUniqueId
```
: 如果为true，将id视为唯一ID

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const updateDeleteItemStyle = () => {
    const updatedItem: MenuItemModel = {
      text: '删除',
      iconCss: 'e-icons e-delete',
      htmlAttributes: {
        'class': 'dangerous-action'
      }
    };
    menuRef.current?.setItem(updatedItem, '删除');
  };

  return (
    <div>
      <button onClick={updateDeleteItemStyle}>更新删除项样式</button>
      <ContextMenuComponent ref={menuRef} target="#target" items={menuItems} />
    </div>
  );
}

Component Lifecycle

组件生命周期

destroy(): void

destroy(): void

Destroy the ContextMenu component and free resources.

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  React.useEffect(() => {
    return () => {
      // Cleanup on component unmount
      menuRef.current?.destroy();
    };
  }, []);

  return (
    <ContextMenuComponent ref={menuRef} target="#target" items={menuItems} />
  );
}

销毁ContextMenu组件并释放资源。

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  React.useEffect(() => {
    return () => {
      // 组件卸载时清理
      menuRef.current?.destroy();
    };
  }, []);

  return (
    <ContextMenuComponent ref={menuRef} target="#target" items={menuItems} />
  );
}

Events & Event Arguments

事件与事件参数

The ContextMenu component provides 7 events for monitoring and controlling user interactions:

ContextMenu组件提供7种事件用于监控和控制用户交互：

Menu Lifecycle Events

菜单生命周期事件

beforeOpen

beforeOpen

Type:

EmitType<BeforeOpenCloseMenuEventArgs>

Fires before the menu opens. Use to prevent opening, modify items, or prepare data.

Event Arguments:

interface BeforeOpenCloseMenuEventArgs {
  element: HTMLElement;           // Menu element
  event: Event;                    // Browser event object
  items: MenuItemModel[];          // Current menu items
  cancel: boolean;                 // Set to true to prevent action
  parentItem?: MenuItemModel;      // Parent item if submenu
}

Example: Prevent opening in certain conditions

function App() {
  const handleBeforeOpen = (args: BeforeOpenCloseMenuEventArgs) => {
    // Prevent opening on read-only elements
    const target = args.event?.target as HTMLElement;
    if (target?.classList.contains('read-only')) {
      args.cancel = true;  // Prevent menu from opening
      return;
    }

    // Modify items before opening
    const selectedText = window.getSelection()?.toString();
    if (!selectedText) {
      // Disable text-related operations if no text selected
      args.items = args.items?.map(item => ({
        ...item,
        disabled: ['Copy', 'Cut'].includes(item.text as string)
      }));
    }
  };

  return (
    <ContextMenuComponent
      target="#target"
      items={menuItems}
      beforeOpen={handleBeforeOpen}
    />
  );
}

类型：

EmitType<BeforeOpenCloseMenuEventArgs>

菜单打开前触发。用于阻止打开、修改项或准备数据。

事件参数：

interface BeforeOpenCloseMenuEventArgs {
  element: HTMLElement;           // 菜单元素
  event: Event;                    // 浏览器事件对象
  items: MenuItemModel[];          // 当前菜单项
  cancel: boolean;                 // 设置为true可阻止操作
  parentItem?: MenuItemModel;      // 父项（如果是子菜单）
}

示例： 在特定条件下阻止打开

function App() {
  const handleBeforeOpen = (args: BeforeOpenCloseMenuEventArgs) => {
    // 阻止在只读元素上打开
    const target = args.event?.target as HTMLElement;
    if (target?.classList.contains('read-only')) {
      args.cancel = true;  // 阻止菜单打开
      return;
    }

    // 打开前修改项
    const selectedText = window.getSelection()?.toString();
    if (!selectedText) {
      // 未选中文本时禁用文本相关操作
      args.items = args.items?.map(item => ({
        ...item,
        disabled: ['复制', '剪切'].includes(item.text as string)
      }));
    }
  };

  return (
    <ContextMenuComponent
      target="#target"
      items={menuItems}
      beforeOpen={handleBeforeOpen}
    />
  );
}

onOpen

onOpen

Type:

EmitType<OpenCloseMenuEventArgs>

Fires after the menu opens. Use to initialize UI or perform post-open actions.

Event Arguments:

interface OpenCloseMenuEventArgs {
  element: HTMLElement;           // Menu element
  event: Event;                    // Browser event that triggered opening
  items: MenuItemModel[];          // Current menu items
}

Example: Initialize after opening

function App() {
  const handleOnOpen = (args: OpenCloseMenuEventArgs) => {
    console.log('Menu opened at:', new Date());
    console.log('Number of items:', args.items?.length);
    
    // Set focus to first menu item for accessibility
    setTimeout(() => {
      const firstItem = args.element?.querySelector('.e-menu-item');
      (firstItem as HTMLElement)?.focus();
    }, 0);
  };

  return (
    <ContextMenuComponent
      target="#target"
      items={menuItems}
      onOpen={handleOnOpen}
    />
  );
}

类型：

EmitType<OpenCloseMenuEventArgs>

菜单打开后触发。用于初始化UI或执行打开后的操作。

事件参数：

interface OpenCloseMenuEventArgs {
  element: HTMLElement;           // 菜单元素
  event: Event;                    // 触发打开的浏览器事件
  items: MenuItemModel[];          // 当前菜单项
}

示例： 打开后初始化

function App() {
  const handleOnOpen = (args: OpenCloseMenuEventArgs) => {
    console.log('菜单打开时间:', new Date());
    console.log('项数量:', args.items?.length);
    
    // 为无障碍访问设置焦点到第一个菜单项
    setTimeout(() => {
      const firstItem = args.element?.querySelector('.e-menu-item');
      (firstItem as HTMLElement)?.focus();
    }, 0);
  };

  return (
    <ContextMenuComponent
      target="#target"
      items={menuItems}
      onOpen={handleOnOpen}
    />
  );
}

beforeClose

beforeClose

Type:

EmitType<BeforeOpenCloseMenuEventArgs>

Fires before the menu closes. Use to prevent closing or save state.

Example: Prevent closing on unsaved changes

function App() {
  const [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(false);

  const handleBeforeClose = (args: BeforeOpenCloseMenuEventArgs) => {
    if (hasUnsavedChanges) {
      const confirmed = window.confirm('Unsaved changes. Close anyway?');
      if (!confirmed) {
        args.cancel = true;  // Prevent menu from closing
      }
    }
  };

  return (
    <ContextMenuComponent
      target="#target"
      items={menuItems}
      beforeClose={handleBeforeClose}
    />
  );
}

类型：

EmitType<BeforeOpenCloseMenuEventArgs>

菜单关闭前触发。用于阻止关闭或保存状态。

示例： 有未保存更改时阻止关闭

function App() {
  const [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(false);

  const handleBeforeClose = (args: BeforeOpenCloseMenuEventArgs) => {
    if (hasUnsavedChanges) {
      const confirmed = window.confirm('存在未保存更改。仍要关闭吗？');
      if (!confirmed) {
        args.cancel = true;  // 阻止菜单关闭
      }
    }
  };

  return (
    <ContextMenuComponent
      target="#target"
      items={menuItems}
      beforeClose={handleBeforeClose}
    />
  );
}

onClose

onClose

Type:

EmitType<OpenCloseMenuEventArgs>

Fires after the menu closes. Use for cleanup or state management.

Example: Clean up after menu closes

function App() {
  const handleOnClose = (args: OpenCloseMenuEventArgs) => {
    console.log('Menu closed');
    
    // Clear temporary selections or states
    document.querySelectorAll('.temp-highlight').forEach(el => {
      el.classList.remove('temp-highlight');
    });
  };

  return (
    <ContextMenuComponent
      target="#target"
      items={menuItems}
      onClose={handleOnClose}
    />
  );
}

类型：

EmitType<OpenCloseMenuEventArgs>

菜单关闭后触发。用于清理或状态管理。

示例： 菜单关闭后清理

function App() {
  const handleOnClose = (args: OpenCloseMenuEventArgs) => {
    console.log('菜单已关闭');
    
    // 清除临时选择或状态
    document.querySelectorAll('.temp-highlight').forEach(el => {
      el.classList.remove('temp-highlight');
    });
  };

  return (
    <ContextMenuComponent
      target="#target"
      items={menuItems}
      onClose={handleOnClose}
    />
  );
}

Item Interaction Events

项交互事件

select

select

Type:

EmitType<MenuEventArgs>

Fires when a menu item is clicked/selected. Use to execute actions based on selection.

Event Arguments:

interface MenuEventArgs {
  element: HTMLElement;           // Menu item element
  event: Event;                    // Click/keyboard event
  item?: MenuItemModel;            // Selected menu item
  items?: MenuItemModel[];         // All menu items
}

Example: Execute actions on item selection

function App() {
  const handleSelect = (args: MenuEventArgs) => {
    const itemText = args.item?.text;

    switch (itemText) {
      case 'Cut':
        document.execCommand('cut');
        console.log('Cut executed');
        break;
      case 'Copy':
        document.execCommand('copy');
        console.log('Copy executed');
        break;
      case 'Paste':
        document.execCommand('paste');
        console.log('Paste executed');
        break;
      case 'Delete':
        if (confirm('Confirm delete?')) {
          console.log('Delete executed');
        }
        break;
    }
  };

  return (
    <ContextMenuComponent
      target="#target"
      items={menuItems}
      select={handleSelect}
    />
  );
}

类型：

EmitType<MenuEventArgs>

点击/选中菜单项时触发。用于根据选择执行操作。

事件参数：

interface MenuEventArgs {
  element: HTMLElement;           // 菜单项元素
  event: Event;                    // 点击/键盘事件
  item?: MenuItemModel;            // 选中的菜单项
  items?: MenuItemModel[];         // 所有菜单项
}

示例： 选中项时执行操作

function App() {
  const handleSelect = (args: MenuEventArgs) => {
    const itemText = args.item?.text;

    switch (itemText) {
      case '剪切':
        document.execCommand('cut');
        console.log('执行剪切');
        break;
      case '复制':
        document.execCommand('copy');
        console.log('执行复制');
        break;
      case '粘贴':
        document.execCommand('paste');
        console.log('执行粘贴');
        break;
      case '删除':
        if (confirm('确认删除？')) {
          console.log('执行删除');
        }
        break;
    }
  };

  return (
    <ContextMenuComponent
      target="#target"
      items={menuItems}
      select={handleSelect}
    />
  );
}

beforeItemRender

beforeItemRender

Type:

EmitType<MenuEventArgs>

Fires before each menu item renders. Use to customize item appearance or add custom logic.

Example: Conditionally disable items

function App() {
  const handleBeforeItemRender = (args: MenuEventArgs) => {
    const itemText = args.item?.text;

    // Disable delete if user doesn't have permission
    if (itemText === 'Delete' && !userPermissions.canDelete) {
      args.element?.classList.add('e-disabled');
    }

    // Highlight recent items
    if (itemText?.startsWith('Recent:')) {
      args.element?.classList.add('recent-item-highlight');
    }

    // Add keyboard shortcut indicator
    const shortcuts: Record<string, string> = {
      'Cut': 'Ctrl+X',
      'Copy': 'Ctrl+C',
      'Paste': 'Ctrl+V'
    };

    if (shortcuts[itemText as string]) {
      const shortcutEl = document.createElement('span');
      shortcutEl.className = 'shortcut-hint';
      shortcutEl.textContent = shortcuts[itemText as string];
      args.element?.appendChild(shortcutEl);
    }
  };

  return (
    <ContextMenuComponent
      target="#target"
      items={menuItems}
      beforeItemRender={handleBeforeItemRender}
    />
  );
}

类型：

EmitType<MenuEventArgs>

每个菜单项渲染前触发。用于自定义项外观或添加自定义逻辑。

示例： 有条件地禁用项

function App() {
  const handleBeforeItemRender = (args: MenuEventArgs) => {
    const itemText = args.item?.text;

    // 用户无权限时禁用删除
    if (itemText === '删除' && !userPermissions.canDelete) {
      args.element?.classList.add('e-disabled');
    }

    // 高亮最近项
    if (itemText?.startsWith('最近:')) {
      args.element?.classList.add('recent-item-highlight');
    }

    // 添加键盘快捷键指示器
    const shortcuts: Record<string, string> = {
      '剪切': 'Ctrl+X',
      '复制': 'Ctrl+C',
      '粘贴': 'Ctrl+V'
    };

    if (shortcuts[itemText as string]) {
      const shortcutEl = document.createElement('span');
      shortcutEl.className = 'shortcut-hint';
      shortcutEl.textContent = shortcuts[itemText as string];
      args.element?.appendChild(shortcutEl);
    }
  };

  return (
    <ContextMenuComponent
      target="#target"
      items={menuItems}
      beforeItemRender={handleBeforeItemRender}
    />
  );
}

Component Lifecycle

组件生命周期

created

created

Type:

EmitType<Event>

Fires after the component is fully created and rendered. Use for initialization.

Example: Initialize after creation

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const handleCreated = () => {
    console.log('ContextMenu created and ready');
    
    // Perform initial setup
    menuRef.current?.enableItems(['Advanced Options'], userRole === 'admin');
    
    // Add custom data to items
    const items = menuRef.current?.items;
    if (items) {
      items.forEach((item, index) => {
        item.id = `item-${index}`;
      });
    }
  };

  return (
    <ContextMenuComponent
      ref={menuRef}
      target="#target"
      items={menuItems}
      created={handleCreated}
    />
  );
}

类型：

EmitType<Event>

组件完全创建并渲染后触发。用于初始化。

示例： 创建后初始化

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const handleCreated = () => {
    console.log('ContextMenu已创建并就绪');
    
    // 执行初始设置
    menuRef.current?.enableItems(['高级选项'], userRole === '管理员');
    
    // 为项添加自定义数据
    const items = menuRef.current?.items;
    if (items) {
      items.forEach((item, index) => {
        item.id = `item-${index}`;
      });
    }
  };

  return (
    <ContextMenuComponent
      ref={menuRef}
      target="#target"
      items={menuItems}
      created={handleCreated}
    />
  );
}

Menu Items and Data Binding

菜单项与数据绑定

📄 Read: references/menu-items-and-data-binding.md

Creating menu items with MenuItemModel
Using the items property
Data binding with local data sources
Dynamic menu item generation from arrays
Nested submenu configuration

📄 阅读： references/menu-items-and-data-binding.md

使用MenuItemModel创建菜单项
使用items属性
本地数据源的数据绑定
从数组动态生成菜单项
嵌套子菜单配置

Templates and Customization

模板与自定义

📄 Read: references/templates-and-customization.md

Custom item templates (itemTemplate)
Rendering rich content in menu items
beforeItemRender event for item customization
Adding icons and metadata to items
Conditional rendering

📄 阅读： references/templates-and-customization.md

自定义项模板（itemTemplate）
在菜单项中渲染富内容
使用beforeItemRender事件自定义项
为项添加图标和元数据
条件渲染

Styling and Appearance

样式与外观

📄 Read: references/styling-and-appearance.md

CSS class customization
Theme Studio integration
Custom CSS overrides for menu elements
Icon styling and positioning
Visual states (hover, selected, disabled)

📄 阅读： references/styling-and-appearance.md

CSS类自定义
Theme Studio集成
菜单元素的自定义CSS覆盖
图标样式与定位
视觉状态（悬停、选中、禁用）

Accessibility and Keyboard Navigation

无障碍访问与键盘导航

📄 Read: references/accessibility-and-keyboard-navigation.md

WCAG 2.2 and Section 508 compliance
Screen reader support and ARIA attributes
Keyboard shortcuts (Esc, Enter, arrow keys)
Right-to-left (RTL) support
Focus management

📄 阅读： references/accessibility-and-keyboard-navigation.md

WCAG 2.2和Section 508合规
屏幕阅读器支持和ARIA属性
键盘快捷键（Esc、Enter、箭头键）
从右到左（RTL）支持
焦点管理

Advanced Features

高级功能

📄 Read: references/advanced-features.md

Scrollable context menus
Animation settings and effects
Menu open types and positioning
Overflow handling and dynamic layouts
Configuration for complex scenarios

📄 阅读： references/advanced-features.md

可滚动上下文菜单
动画设置与效果
菜单打开类型与定位
溢出处理与动态布局
复杂场景配置

Use Cases and Patterns

使用场景与模式

📄 Read: references/use-cases-and-patterns.md

Common context menu patterns
Adding/removing/enabling/disabling items dynamically
Rendering separators between items
Multi-level nesting examples
Real-world integration scenarios

📄 阅读： references/use-cases-and-patterns.md

常见上下文菜单模式
动态添加/移除/启用/禁用项
在项之间渲染分隔符
多级嵌套示例
实际集成场景

Quick Reference

快速参考

Essential Code Template

核心代码模板

import { ContextMenuComponent, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const menuItems: MenuItemModel[] = [
    { text: 'Cut', iconCss: 'e-icons e-cut', id: 'cut' },
    { text: 'Copy', iconCss: 'e-icons e-copy', id: 'copy' },
    { text: 'Paste', iconCss: 'e-icons e-paste', id: 'paste' },
    { separator: true },
    {
      text: 'More',
      items: [
        { text: 'Delete' },
        { text: 'Properties' }
      ]
    }
  ];

  const handleSelect = (args: any) => {
    console.log('Selected:', args.item?.text);
  };

  const handleBeforeOpen = (args: any) => {
    // Customize menu before opening
  };

  return (
    <div>
      <div id="target">Right-click me</div>
      <ContextMenuComponent
        ref={menuRef}
        target="#target"
        items={menuItems}
        select={handleSelect}
        beforeOpen={handleBeforeOpen}
        animationSettings={{ effect: 'FadeIn', duration: 300 }}
        enableScrolling={true}
      />
    </div>
  );
}

export default App;

import { ContextMenuComponent, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';

function App() {
  const menuRef = React.useRef<ContextMenuComponent>(null);

  const menuItems: MenuItemModel[] = [
    { text: '剪切', iconCss: 'e-icons e-cut', id: 'cut' },
    { text: '复制', iconCss: 'e-icons e-copy', id: 'copy' },
    { text: '粘贴', iconCss: 'e-icons e-paste', id: 'paste' },
    { separator: true },
    {
      text: '更多',
      items: [
        { text: '删除' },
        { text: '属性' }
      ]
    }
  ];

  const handleSelect = (args: any) => {
    console.log('选中:', args.item?.text);
  };

  const handleBeforeOpen = (args: any) => {
    // 打开前自定义菜单
  };

  return (
    <div>
      <div id="target">右键点击我</div>
      <ContextMenuComponent
        ref={menuRef}
        target="#target"
        items={menuItems}
        select={handleSelect}
        beforeOpen={handleBeforeOpen}
        animationSettings={{ effect: 'FadeIn', duration: 300 }}
        enableScrolling={true}
      />
    </div>
  );
}

export default App;

Common Methods Reference

常用方法参考

// Open menu at coordinates
menuRef.current?.open(100, 150);

// Close menu
menuRef.current?.close();

// Enable/disable items
menuRef.current?.enableItems(['Delete', 'Archive'], false);

// Show/hide items
menuRef.current?.showItems(['Delete']);
menuRef.current?.hideItems(['Export']);

// Add items
menuRef.current?.insertAfter(
  [{ text: 'New Option' }],
  'Existing Item'
);

// Remove items
menuRef.current?.removeItems(['Outdated Item']);

// Get item index
const indices = menuRef.current?.getItemIndex('Copy');

Next Steps: Choose reference based on your need. Start with getting-started.md, or explore specific features in other references.

// 在指定坐标打开菜单
menuRef.current?.open(100, 150);

// 关闭菜单
menuRef.current?.close();

// 启用/禁用项
menuRef.current?.enableItems(['删除', '归档'], false);

// 显示/隐藏项
menuRef.current?.showItems(['删除']);
menuRef.current?.hideItems(['导出']);

// 添加项
menuRef.current?.insertAfter(
  [{ text: '新选项' }],
  '现有项'
);

// 移除项
menuRef.current?.removeItems(['过时项']);

// 获取项索引
const indices = menuRef.current?.getItemIndex('复制');

下一步： 根据需求选择参考文档。从getting-started.md开始，或探索其他参考中的特定功能。

syncfusion-react-context-menu

Original

Translation

Implementing Syncfusion React Context Menu

实现Syncfusion React上下文菜单

When to Use This Skill

何时使用此技能

Getting Started

入门指南

Component Properties Reference

组件属性参考

Essential Properties

核心属性

target (Required)

target（必填）

items (Required)

items（必填）

Display & Animation Properties

显示与动画属性

animationSettings

animationSettings

cssClass

cssClass

enableScrolling

enableScrolling

Interaction Properties

交互属性

filter

filter

hoverDelay

hoverDelay

showItemOnClick

showItemOnClick

Data & Content Properties

数据与内容属性

itemTemplate

itemTemplate

locale

locale

Security & State Properties

安全与状态属性

enableHtmlSanitizer

enableHtmlSanitizer

enablePersistence

enablePersistence

enableRtl

enableRtl

Menu Item Model Properties

菜单项模型属性

Text & Display

文本与显示

text

text

id

id

iconCss

iconCss

Item Structure

项结构

items

items

separator

separator

Navigation

导航

url

url

Custom Attributes

自定义属性

htmlAttributes

htmlAttributes

Menu Methods – Programmatic Control

菜单方法 – 编程控制

Menu State Control

菜单状态控制

open(top: number, left: number, target?: HTMLElement): void

open(top: number, left: number, target?: HTMLElement): void

close(): void

close(): void

Item Visibility Control

`target`
(Required)

`target`
（必填）

`items`
(Required)

`items`
（必填）

`animationSettings`

`animationSettings`

`cssClass`

`cssClass`

`enableScrolling`

`enableScrolling`

`filter`

`filter`

`hoverDelay`

`hoverDelay`

`showItemOnClick`

`showItemOnClick`

`itemTemplate`

`itemTemplate`

`locale`

`locale`

`enableHtmlSanitizer`

`enableHtmlSanitizer`

`enablePersistence`

`enablePersistence`

`enableRtl`

`enableRtl`

`text`

`text`

`id`

`id`

`iconCss`

`iconCss`

`items`

`items`

`separator`

`separator`

`url`

`url`

`htmlAttributes`

`htmlAttributes`

`open(top: number, left: number, target?: HTMLElement): void`

`open(top: number, left: number, target?: HTMLElement): void`

`close(): void`

`close(): void`

`showItems(items: string[], isUniqueId?: boolean): void`

`showItems(items: string[], isUniqueId?: boolean): void`

`hideItems(items: string[], isUniqueId?: boolean): void`

`hideItems(items: string[], isUniqueId?: boolean): void`

`enableItems(items: string[], enable: boolean, isUniqueId?: boolean): void`

`enableItems(items: string[], enable: boolean, isUniqueId?: boolean): void`

`insertAfter(items: MenuItemModel[], text: string, isUniqueId?: boolean): void`

`insertAfter(items: MenuItemModel[], text: string, isUniqueId?: boolean): void`

`insertBefore(items: MenuItemModel[], text: string, isUniqueId?: boolean): void`

`insertBefore(items: MenuItemModel[], text: string, isUniqueId?: boolean): void`

`removeItems(items: string[], isUniqueId?: boolean): void`

`removeItems(items: string[], isUniqueId?: boolean): void`

`getItemIndex(item: MenuItem | string, isUniqueId?: boolean): number[]`

`getItemIndex(item: MenuItem | string, isUniqueId?: boolean): number[]`

`setItem(item: MenuItem, id?: string, isUniqueId?: boolean): void`

`setItem(item: MenuItem, id?: string, isUniqueId?: boolean): void`

`destroy(): void`

`destroy(): void`

`beforeOpen`

`beforeOpen`

`onOpen`

`onOpen`

`beforeClose`

`beforeClose`

`onClose`

`onClose`

`select`

`select`

`beforeItemRender`

`beforeItemRender`

`created`

`created`