菜单模板

Menu组件允许您为其项定义自定义模板。本文将解释如何使用它。

的ItemTemplate项下定义的ItemTemplate菜单的标签。

模板接收项目绑定到的模型上下文．您可以使用它来呈现所需的内容。该菜单是一个通用组件，因此您可以使用命名的上下文变量，该变量将是模型类型，而不需要额外的强制转换。

您可以使用模板根据应用程序的数据和逻辑呈现任意内容。您可以在其中使用组件，从而提供丰富的内容，而不是纯文本。您还可以使用它来添加DOM事件处理程序，如单击、双击、鼠标悬停，如果您需要响应它们。

使用你自己的NavLink元素来导航，而不是菜单的内置功能  @{var shouldNavigate = !string.IsNullOrEmpty(item. page);if (shouldNavigate) {@*k-menu-link-text将扩展NavLink以匹配默认的菜单样式*@ 查看更多关于我们的@item.Section. tolowerinvariant ()}}   @code {public List MenuItems {get;设置;}公共类MenuItem{公共字符串Section{获取;设置;}公共字符串页面{获取;设置;} public List SubSectionList {get;设置; } } protected override void OnInitialized() { MenuItems = new List() { new MenuItem() { Section = "Company", SubSectionList = new List() { new MenuItem() { Section = "Overview", Page = "company/overview" }, new MenuItem() { Section = "Events", Page = "company/events" }, new MenuItem() { Section = "Careers", Page = "company/careers" } } }, new MenuItem() { Section = "Services", SubSectionList = new List() { new MenuItem() { Section = "Consulting", Page = "consultingservices" }, new MenuItem() { Section = "Education", Page = "education" } } } }; base.OnInitialized(); } }

@inject NavigationManager NavigationManager   @{if (EqualityComparer. default。= (item, SelectedMenuItem)) {@*k-menu-link-text将扩展span以匹配默认菜单样式*@ @item。Text} else {string target = "";if (!IsInternalPage(item.Url)) {target = "_blank";} @*k-menu-link-text将扩展NavLink以匹配默认菜单样式*@ (){新菜单项(){文本=“文档”,Url = " https://docs.telerik.com/blazor-ui/introduction "},新的菜单项(){文本=“现场演示”, Url = "//www.aliitrade.com/demos/blazor-ui" } } } }; SelectedMenuItem = MenuItems.Find(item => CompareCurrentPageUrl(item.Url)); base.OnInitialized(); } private void OnClick(MenuItem item) { if (IsInternalPage(item.Url)) { SelectedMenuItem = item; } } private bool CompareCurrentPageUrl(string urlToCopmare) { return navigationManager.Uri.Substring(navigationManager.BaseUri.Length - 1).Equals(urlToCopmare); } private bool IsInternalPage(string url) { if (string.IsNullOrEmpty(url)) { return false; } return !(url.StartsWith("https://") || url.StartsWith("http://")); } public class MenuItem { public string Text { get; set; } public string Url { get; set; } public List Items { get; set; } } }

另请参阅

• 数据绑定菜单
• 现场演示:菜单模板