Blazor菜单概述

的Blazor菜单组件以传统的类似菜单的结构显示数据(平面或分层)。除了内置的导航功能，您还可以浏览项及其子项、定义模板对于单个节点，呈现文本和图标/图像，并对其进行响应事件．

的Menu组件的一部分Blazor的Telerik UI，一个专业级的UI库，包含100个本地组件，用于构建现代和功能丰富的应用程序。想要试用它，可以注册一个30天的免费试用期。

下载免费试用

创建Blazor菜单

1. 使用TelerikMenu标记，将组件添加到razor页面。

2. 填充数据属性设置为要显示在菜单中的项的集合。菜单将自动识别属性名称，如Id，ParentId，文本还有其他一些。否则,使用绑定配置自定义属性名．

@*使用菜单在视图之间导航*@  @code{公共列表 MenuItems {get;设置;}公共类MenuItem{公共字符串文本{获取;设置;}公共字符串Url{获取;设置;} public List Items {get;设置;}}保护覆盖空白OnInitialized(){菜单项=新列表<子菜单>(){新菜单项(){文本= "公司",/ /物品,没有一个URL不会呈现链接项=新列表<子菜单>(){新菜单项(){文本=“概述”,URL =“公司/概述”},新的菜单项(){文本=“事件”,URL =“公司/事件”},新的菜单项(){文本=“事业”,URL =“公司/事业}}},新的菜单项(){文本=“服务”,项目=新列表<子菜单>(){新菜单项(){文本=“咨询”,万博体育手机版网址Url = "consulting万博体育手机版网址services"}， new MenuItem() {Text = "Education"， Url = "Education"}}}}; base.OnInitialized(); } }

数据绑定

要显示任何项，Blazor菜单需要一个数据源，您可以通过数据财产。菜单允许您以平面数据和层次结构的方式显示项目。阅读更多关于Blazor菜单数据绑定…

导航视图

菜单通常用于列出应用程序中的页面、视图或部分，以便用户可以在其中导航。要用菜单做到这一点，你有两个选项:

• 使用内置的UrlField在绑定数据在锚中填充URL，如果您为给定的项目提供URL，菜单将生成锚。方法演示了此方法创建Blazor菜单的例子。
• 使用一个模板要生成所需的链接(例如，NavLink组件)使用您自己的代码来进行微调。

阅读更多关于Blazor菜单导航…

取向

Blazor菜单允许您控制其方向，并水平或垂直显示项目。阅读更多关于Blazor菜单方向…

模板

您可以使用内置模板的功能，并自定义项目中呈现的内容。阅读更多关于Blazor菜单模板…

菜单图标

为了说明每个菜单项的用途，Blazor菜单允许您添加图像、图标类或字体图标。阅读更多关于Blazor菜单图标…

事件

Blazor菜单生成事件，您可以处理并进一步自定义其行为。阅读更多关于Blazor菜单事件…

菜单参数

背景信息菜单参数如下表所示，与本界面其他特性无关。检查菜单API参考获取属性、方法和事件的完整列表。

下一个步骤

• 将菜单绑定到数据

• 使用菜单在页面之间导航

另请参阅

• 现场演示:菜单
• API参考