syncfusion-blazor-context-menu

Syncfusion Blazor ContextMenu 组件

何时使用此技能

在以下情况下使用 Syncfusion Blazor ContextMenu 技能：

• 为交互元素构建右键上下文菜单
• 创建由用户交互触发的弹出式导航菜单
• 需要支持嵌套的层级菜单结构
• 实现包含快捷键或图标的自定义菜单模板
• 管理动态菜单状态（启用／禁用菜单项）
• 需要根据自定义对象集合构建数据驱动菜单
• 构建包含对话框、动画或滚动的高级交互

ContextMenu 提供完全可自定义、由事件驱动的弹出式菜单，非常适合 Web 应用中的桌面风格交互。

---

文档和导航指南

入门

📄 阅读： references/getting-started.md

• NuGet 安装（Navigations + Themes 软件包）
• 命名空间导入和 Syncfusion 服务注册
• 样式表和脚本资源设置
• 基本 ContextMenu 组件标记
• 首次渲染和点击测试验证
• Blazor 项目中的常见导入模式

自定义和嵌套

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

• 用于丰富 UI 的自定义 MenuTemplate（快捷键、徽章、图标）
• 用于组件级样式设置的 CssClass 属性
• 多级嵌套（2-3 层）
• 嵌套的 MenuItem 层级结构
• 菜单深度和 UX 最佳实践

图标和导航

📄 阅读： references/icons-and-navigation.md

• IconCss 属性和 e-icons 类映射
• 支持自定义图标类
• 菜单项中的图标定位
• 用于超链接导航的 Url 属性
• 导航目标行为（_blank、_self 等）

样式和外观

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

• CSS 类覆盖参考（.e-contextmenu-container、.e-menu-item 等）
• 焦点和选中状态样式
• 使用 Theme Studio 自定义主题
• 常见样式模式和示例

事件和交互

📄 阅读： references/events-and-interactions.md

• ItemSelected 事件绑定和模式
• MenuEventArgs 数据访问
• 使用坐标通过代码调用 Open/Close 方法
• 手动控制和触发菜单
• 事件处理程序最佳实践

数据绑定

📄 阅读： references/data-binding.md

• Items 集合绑定
• MenuFieldSettings 属性映射
• 自定义对象数据源
• 使用嵌套集合进行层级数据绑定
• 动态填充菜单

菜单项管理

📄 阅读： references/menu-item-management.md

• 使用 Disabled 属性管理菜单项状态
• 启用／禁用逻辑和工作流
• 使用 OnOpen 事件按条件禁用菜单项
• Separator 属性的用法和样式设置
• 动态控制菜单项的可用性

高级功能

📄 阅读： references/advanced-features.md

• 使用 MenuAnimationSettings 设置效果（FadeIn、SlideDown、ZoomIn、None）
• 将对话框与 ItemSelected 事件集成
• 使用 EnableScrolling 滚动较长的菜单列表
• ScrollHeight 配置
• 处理大型菜单的策略

---

快速入门示例

@using Syncfusion.Blazor.Navigations

<div id="target">Right click to open menu</div>

<SfContextMenu Target="#target" TValue="MenuItem">
    <MenuItems>
        <MenuItem Text="Cut"></MenuItem>
        <MenuItem Text="Copy"></MenuItem>
        <MenuItem Text="Paste"></MenuItem>
    </MenuItems>
</SfContextMenu>

<style>
    #target {
        border: 1px dashed; height: 150px; padding: 10px;
        position: relative; text-align: center; color: gray;
    }
</style>

结果： 右键单击灰色区域，即可查看包含 Cut、Copy、Paste 选项的上下文菜单。

---

常见模式

模式 1：基本右键菜单

<SfContextMenu Target="#myElement" TValue="MenuItem">
    <MenuItems>
        <MenuItem Text="Edit"></MenuItem>
        <MenuItem Text="Delete"></MenuItem>
    </MenuItems>
</SfContextMenu>

适用场景： 在目标元素上显示包含基本操作的简单菜单。

模式 2：嵌套菜单（悬停时显示子菜单）

<SfContextMenu Target="#myElement" TValue="MenuItem">
    <MenuItems>
        <MenuItem Text="File">
            <MenuItems>
                <MenuItem Text="Open"></MenuItem>
                <MenuItem Text="Save"></MenuItem>
            </MenuItems>
        </MenuItem>
    </MenuItems>
</SfContextMenu>

适用场景： 包含分组操作的层级菜单结构。

模式 3：事件驱动的操作

<SfContextMenu Target="#myElement" TValue="MenuItem">
    <MenuItems>
        <MenuItem Text="Delete"></MenuItem>
    </MenuItems>
    <MenuEvents TValue="MenuItem" ItemSelected="@OnItemSelected"></MenuEvents>
</SfContextMenu>

@code {
    private void OnItemSelected(MenuEventArgs<MenuItem> e) {
        // Handle: e.Item.Text
    }
}

适用场景： 需要在单击菜单项时执行自定义逻辑。

模式 4：根据数据生成动态菜单

<SfContextMenu Target="#myElement" Items="@menuItems">
    <MenuFieldSettings Text="Title"></MenuFieldSettings>
</SfContextMenu>

@code {
    private List<MenuOption> menuItems = new();
    
    protected override void OnInitialized() {
        menuItems.Add(new MenuOption { Title = "Option 1" });
        menuItems.Add(new MenuOption { Title = "Option 2" });
    }
    
    private class MenuOption { public string Title { get; set; } }
}

适用场景： 菜单项来自数据库或动态数据源。

---

关键属性

属性	类型	用途
Target	string	右键单击目标元素的 CSS 选择器
Items	List	用于数据绑定的数据集合
TValue	generic	类型参数（通常为 MenuItem）
CssClass	string	用于组件样式的自定义 CSS 类
ShowItemOnClick	bool	启用单击打开子菜单，而非悬停打开
EnableScrolling	bool	为较长的菜单列表启用滚动

---

常见用例

用例 1：文件上下文菜单

• 右键单击文件列表项 → 剪切、复制、粘贴、删除、重命名选项
• 参考： events-and-interactions.md + menu-item-management.md

用例 2：富文本编辑器

• 右键单击文本 → 粗体、斜体、下划线、链接选项
• 使用图标和快捷键自定义模板
• 参考： customization-and-nesting.md + icons-and-navigation.md

用例 3：管理控制面板

• 右键单击用户行 → 查看、编辑、权限、删除
• 根据用户角色启用或禁用
• 参考： menu-item-management.md + events-and-interactions.md

用例 4：导航菜单

• 单击按钮 → 打开菜单 → 导航到页面
• 通过平滑动画展示嵌套分类
• 参考： icons-and-navigation.md + advanced-features.md

---

后续步骤

1. 开始： 阅读 getting-started.md 以安装并完成设置
2. 构建： 使用 customization-and-nesting.md 创建自定义 UI
3. 增强： 参阅其他参考指南，添加图标、事件和交互功能
4. 探索： 查看 advanced-features.md，了解动画、对话框和滚动功能