进度®teleerik®用户界面的Blazor反馈门户

<脚本suppress-error =<跨度类="hljs-string" style="color: #a31515; background-color: #b5e61d">“BL9992”<跨度风格="background-color: #b5e61d">><跨度类="hljs-built_in" style="color: #0000ff; background-color: #b5e61d">窗口<跨度风格="background-color: #b5e61d">.navigateToHref =<跨度类="hljs-function">（<跨度类="hljs-params" style="background-color: #b5e61d">电动汽车<跨度风格="background-color: #b5e61d">) = ><强大的><跨度 style="background-color: #b5e61d">{<跨度类="hljs-keyword" style="color: #0000ff; background-color: #b5e61d">如果<跨度风格="background-color: #b5e61d">(电动汽车。键= = =<跨度类="hljs-string" style="color: #a31515; background-color: #b5e61d">“进入”<跨度风格="background-color: #b5e61d">){位置。href=电动汽车.target.href } }; ＠*这个例子展示了如何创建页眉和页脚<跨度类="hljs-keyword" style="color: #0000ff">为打开抽屉，手动选择一个项目。*@ “@DrawerExpanded”数据=<跨度类="hljs-string" style="color: #a31515">“@ data”MiniMode=<跨度类="hljs-string" style="color: #a31515">“真正的”模式=<跨度类="hljs-string" style="color: #a31515">“@DrawerMode。推送”＠bind-SelectedItem =<跨度类="hljs-string" style="color: #a31515">“@SelectedItem”＠裁判=<跨度类="hljs-string" style="color: #a31515">“@DrawerRef”><跨度类="xml"><<跨度类="hljs-name" style="color: #0000ff">模板>＠*头*@<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">div><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">TelerikButton<跨度类="hljs-attr" style="color: #ff0000">OnClick=<跨度类="hljs-string" style="color: #a31515">"@(() => DrawerRef.ToggleAsync())"<跨度类="hljs-attr" style="color: #ff0000">图标=<跨度类="hljs-string" style="color: #a31515">“@FontIcon。菜单”/>＠如果（抽屉里Expanded) {<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">div<跨度类="hljs-attr" style="color: #ff0000">类=<跨度类="hljs-string" style="color: #a31515">“text-info”<跨度类="hljs-attr" style="color: #ff0000">风格=<跨度类="hljs-string" style="color: #a31515">“边界底部:固体;粗细:大胆的;margin-bottom: 3他们;空白:nowrap "}><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">一个<跨度类="hljs-attr" style="color: #ff0000">href=<跨度类="hljs-string" style="color: #a31515">“https://google.com”<跨度类="hljs-attr" style="color: #ff0000">onkeydown=<跨度类="hljs-string" style="color: #a31515">“navigateToHref(事件)”>我的自定义导航到谷歌<跨度类="hljs-tag" style="color: #0000ff">一个><跨度类="hljs-tag" style="color: #0000ff">div>｝其他的{<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">div<跨度类="hljs-attr" style="color: #ff0000">类=<跨度类="hljs-string" style="color: #a31515">“text-info”<跨度类="hljs-attr" style="color: #ff0000">风格=<跨度类="hljs-string" style="color: #a31515">“边界底部:固体;粗细:大胆的;">导航<跨度类="hljs-tag" style="color: #0000ff">div>｝<跨度类="hljs-tag" style="color: #0000ff">div>*自定义项目渲染和项目选择*@<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">div<跨度类="hljs-attr" style="color: #ff0000">类=<跨度类="hljs-string" style="color: #a31515">“k-drawer-items”><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">ul>＠如果（SelectedItem != null && DrawerExpanded) {<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">李<跨度类="hljs-attr" style="color: #ff0000">类=<跨度类="hljs-string" style="color: #a31515">“k-drawer-item”<跨度类="hljs-attr" style="color: #ff0000">风格=<跨度类="hljs-string" style="color: #a31515">“空白:nowrap "}><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">div><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">p><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">强大的>＠SelectedItem。文本<跨度类="hljs-tag" style="color: #0000ff">强大的><跨度类="hljs-tag" style="color: #0000ff">p><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">p>＠SelectedItem。描述<跨度类="hljs-tag" style="color: #0000ff">p><跨度类="hljs-tag" style="color: #0000ff">div><跨度类="hljs-tag" style="color: #0000ff">李>｝＠为each (var item in Data){@*使用onclick处理手动项目选择*@<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">李＠<跨度类="hljs-attr" style="color: #ff0000">onclick=<跨度类="hljs-string" style="color: #a31515">"@(() => SelectedItem = item)"<跨度类="hljs-attr" style="color: #ff0000">类=<跨度类="hljs-string" style="color: #a31515">“k-drawer-item @GetSelectedItemClass(项)”<跨度类="hljs-attr" style="color: #ff0000">风格=<跨度类="hljs-string" style="color: #a31515">“空白:nowrap "}><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">TelerikFontIcon<跨度类="hljs-attr" style="color: #ff0000">图标=<跨度类="hljs-string" style="color: #a31515">“@item。图标”><跨度类="hljs-tag" style="color: #0000ff">TelerikFontIcon>＠如果（抽屉里Expanded) {<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">div><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">div>＠item。文本<跨度类="hljs-tag" style="color: #0000ff">div><跨度类="hljs-tag" style="color: #0000ff">div>｝<跨度类="hljs-tag" style="color: #0000ff">李>｝<跨度类="hljs-tag" style="color: #0000ff">ul><跨度类="hljs-tag" style="color: #0000ff">div>＠*页脚*@ @if (DrawerExpanded) {<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">div<跨度类="hljs-attr" style="color: #ff0000">风格=<跨度类="hljs-string" style="color: #a31515">“text-align:中心;margin-top: 3他们;padding-top: 2 em;Border-top: 2px纯黑色;空白:nowrap "}><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">img<跨度类="hljs-attr" style="color: #ff0000">src=<跨度类="hljs-string" style="color: #a31515">“user-avatar.png”<跨度类="hljs-attr" style="color: #ff0000">alt=<跨度类="hljs-string" style="color: #a31515">“我的阿凡达”<跨度类="hljs-attr" style="color: #ff0000">风格=<跨度类="hljs-string" style="color: #a31515">“这个特性:50%;宽度:50 px;高度:50 px;“/><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">br/><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">br/><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">TelerikButton<跨度类="hljs-attr" style="color: #ff0000">图标=<跨度类="hljs-string" style="color: #a31515">“@FontIcon。注销”<跨度类="hljs-attr" style="color: #ff0000">ThemeColor=<跨度类="hljs-string" style="color: #a31515">“主”>注销<跨度类="hljs-tag" style="color: #0000ff">TelerikButton><跨度类="hljs-tag" style="color: #0000ff">div>｝<跨度类="hljs-tag" style="color: #0000ff">模板><跨度类="xml"><<跨度类="hljs-name" style="color: #0000ff">DrawerContent><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">div<跨度类="hljs-attr" style="color: #ff0000">类=<跨度类="hljs-string" style="color: #a31515">“m-5”>＠SelectedItem的内容?文本- @SelectedItem?描述<跨度类="hljs-tag" style="color: #0000ff">div><跨度类="hljs-tag" style="color: #0000ff">DrawerContent>＠code{公共TelerikDrawer DrawerRef {get;设置;}公共DrawerItem SelectedItem {get;设置;}公共bool DrawerExpanded {get;设置;} =<跨度类="hljs-literal" style="color: #a31515">真正的；public IEnumerable Data {get;设置;} =<跨度类="hljs-keyword" style="color: #0000ff">新列表< DrawerItem > {<跨度类="hljs-keyword" style="color: #0000ff">新DrawerItem {Text =<跨度类="hljs-string" style="color: #a31515">“购物车”， Icon = FontIcon。购物车，描述=<跨度类="hljs-string" style="color: #a31515">“购物车中的物品”｝，<跨度类="hljs-keyword" style="color: #0000ff">新DrawerItem {Text =<跨度类="hljs-string" style="color: #a31515">“设置”， Icon = FontIcon。齿轮，描述=<跨度类="hljs-string" style="color: #a31515">“我的个人资料设置”｝，<跨度类="hljs-keyword" style="color: #0000ff">新DrawerItem {Text =<跨度类="hljs-string" style="color: #a31515">“通知”， Icon = FontIcon。感叹圈，描述=<跨度类="hljs-string" style="color: #a31515">“我的个人资料通知”｝，<跨度类="hljs-keyword" style="color: #0000ff">新DrawerItem {Text =<跨度类="hljs-string" style="color: #a31515">“日历”， Icon = FontIcon。日历, Description =<跨度类="hljs-string" style="color: #a31515">“我的事件”｝｝；公共字符串<跨度类="hljs-function">GetSelectedItemClass（<跨度类="hljs-params">DrawerItem项）{<跨度类="hljs-keyword" style="color: #0000ff">如果（设置SelectedItem = =<跨度类="hljs-literal" style="color: #a31515">零）<跨度类="hljs-keyword" style="color: #0000ff">返回string.Empty;<跨度类="hljs-keyword" style="color: #0000ff">返回SelectedItem.Text.ToLowerInvariant () .Equals (item.Text.ToLowerInvariant ()) ?<跨度类="hljs-string" style="color: #a31515">“text-info”：<跨度类="hljs-string" style="color: #a31515">”“；｝公共<跨度类="hljs-class">类<跨度类="hljs-title" style="color: #a31515">DrawerItem{公共字符串文本{获取;设置;} public FontIcon?图标{get;设置;}公共字符串描述{get;设置;}}

@继承LayoutComponentBase

类=<跨度类="hljs-string" style="color: #a31515">“页面”>类=<跨度类="hljs-string" style="color: #a31515">“drawer-container”>裁判=<跨度类="hljs-string" style="color: #a31515">“@Drawer”数据=<跨度类="hljs-string" style="color: #a31515">“数据”MiniMode=<跨度类="hljs-string" style="color: #a31515">“真正的”扩大了=<跨度类="hljs-string" style="color: #a31515">“真正的”模式=<跨度类="hljs-string" style="color: #a31515">“@DrawerMode。推送”SelectedItemChanged=<跨度类="hljs-string" style="color: #a31515">"((DrawerItem item) => SelectedItemChangedHandler(item))"><内容> 类=<跨度类="hljs-string" style="color: #a31515">“主要”>类=<跨度类="hljs-string" style="color: #a31515">“内容px-4”＠Body

我讨厌把它称为bug，因为我确信我们遗漏了一些东西。以下是该场景的要点:

在身份验证的OnLogInSucceeded部分中。然后，我们从SQL表中构建用户特定的菜单，在分层的DrawerItem列表中构造它。

当我将其传递回TelerikDrawer的Data属性时，显示不会更新。stathaschanged没有任何影响。我们已经尝试将其绑定到一个“服务”上，以侦听变化。我们甚至调用了一个事件来手动进行更新。

主布局@继承LayoutComponentBase @注入NavigationManager @注入NavigationManager @注入PublicClient Http @注入IMatToaster toast @使用G2_Field。共享＠using Microsoft.AspNetCore.Authorization @using Microsoft.AspNetCore.Components.WebAssembly.Authentication @inject IAuthorizationService AuthorizationService @inject Employee dbUSER @attribute [Authorize]<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">TelerikRootComponent><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">div><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">NavMenu＠<跨度类="hljs-attr" style="color: #ff0000">裁判=<跨度类="hljs-string" style="color: #a31515">“纳米”<跨度类="hljs-attr" style="color: #ff0000">项目=<跨度类="hljs-string" style="color: #a31515">“@ data”/><跨度类="hljs-tag" style="color: #0000ff">div><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">div<跨度类="hljs-attr" style="color: #ff0000">类=<跨度类="hljs-string" style="color: #a31515">“app-main”><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">div<跨度类="hljs-attr" style="color: #ff0000">类=<跨度类="hljs-string" style="color: #a31515">“app-bar”><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">div<跨度类="hljs-attr" style="color: #ff0000">风格=<跨度类="hljs-string" style="color: #a31515">“浮动:左”><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">TelerikButton<跨度类="hljs-attr" style="color: #ff0000">OnClick=<跨度类="hljs-string" style="color: #a31515">“@ToggleDrawer”<跨度类="hljs-attr" style="color: #ff0000">图标=<跨度类="hljs-string" style="color: #a31515">“@Telerik.Blazor.IconName.Menu”<跨度类="hljs-attr" style="color: #ff0000">类=<跨度类="hljs-string" style="color: #a31515">“k-flat”/><跨度类="hljs-tag" style="color: #0000ff">div><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">div<跨度类="hljs-attr" style="color: #ff0000">风格=<跨度类="hljs-string" style="color: #a31515">“浮动:正确的”><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">LoginDisplay/><跨度类="hljs-tag" style="color: #0000ff">div><跨度类="hljs-tag" style="color: #0000ff">div><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">div>＠Body<跨度类="hljs-tag" style="color: #0000ff">div><跨度类="hljs-tag" style="color: #0000ff">div><跨度类="hljs-tag" style="color: #0000ff">TelerikRootComponent><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">MatToastContainer/>＠code{公共TelerikDrawer<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">DrawerItem>抽屉{get;设置;}公共DrawerItem SelectedItem {get;设置;}公共bool扩展{get;设置;} = true;NavMenu海里;公共列表<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">DrawerItem>数据{获取;设置;} = new List<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">DrawerItem>{新DrawerItem {Text ="HOME"， Icon = Telerik.Blazor.IconName。窗口，Description =" Home"， URL=""}};public async Task ToggleDrawer() {await nm.ToggleDrawer();}公共async任务OnSidebarChange(列表<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">DrawerItem>di){数据= di;Console.WriteLine (di.Last () .Children.Last()。text);等待nm.RefreshMenu (di);}……认证@page "/ AUTHENTICATION /{Action}" @using Microsoft.AspNetCore.Components.WebAssembly.Authentication @using G2_Field。共享@using System.Security.Claims @inject Employee dbUSER @inject PublicClient Http @using System.Threading.Tasks<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">RemoteAuthenticatorView<跨度类="hljs-attr" style="color: #ff0000">行动=<跨度类="hljs-string" style="color: #a31515">“@Action”<跨度类="hljs-attr" style="color: #ff0000">OnLogInSucceeded=<跨度类="hljs-string" style="color: #a31515">@OnLogInSucceeded><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">LoggingIn>您将被重定向到https://login.microsoftonline.com。<跨度类="hljs-tag" style="color: #0000ff">LoggingIn><跨度类="hljs-tag" style="color: #0000ff">RemoteAuthenticatorView>＠code{[参数]公共字符串动作{获取;设置;} AppCategories[] iMenu = new AppCategories[0];[CascadingParameter] private任务<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">AuthenticationState>一个uthenticationStateTask {get;设置;} [CascadingParameter] public任务<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">AuthenticationState>AuthenticationState{得到；设置;} [CascadingParameter] public列表<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">DrawerItem>D {get;设置;} [CascadingParameter(Name = "theMainLayout")] public MainLayout ml {get;设置;}公共async void OnLogInSucceeded() {var user =(等待AuthenticationState).User;var un = (await AuthenticationState).User.Claims.ToList();Var username = ";if (user.Identity.IsAuthenticated){//做一些事情控制台。WriteLine("登录成功事件触发");foreach (Claim u in un) {//Console.WriteLine(u。Type + " = " + u.Value.ToString());if (u.Type == "preferred_username") {username = u.Value.ToString(); } } dbUSER = await Http.Client.GetJsonAsync<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">员工>（"/api/Index/GetCurrentEmployee/" + username);控制台。WriteLine("EmpUserName=" + dbUSER.EmpUserName);var gUserName = duser . empusername;iMenu = await Http.Client.GetJsonAsync<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">AppCategories []>（"/api/Index/GetUserAppCategories/" + gUserName);d = new List<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">DrawerItem>（）；d.添加(新的DrawerItem {Text = "HOME"， Icon = "fa-home"， Description = "HOME"， URL = ""});foreach (var app in immenu){列表<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">DrawerItem>y = new List<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">DrawerItem>（）；为each (var cat在app.ItemList) {DrawerItem z =新的DrawerItem {Text = cat。MenuItemTitle，图标= cat。菜单ItemIcon, Description = cat.MenuItemDescription, URL = cat.MenuItemURL }; y.Add(z); } DrawerItem x = new DrawerItem { Text = app.MenuCategoryTitle, Icon = Telerik.Blazor.IconName.Menu, Description = app.MenuCategoryTitle, Children = y }; d.Add(x); } StateHasChanged(); = new MainLayout(); ml.OnSidebarChange(d); } }... NAVMENU @inject NavigationManager navigationManager @using Microsoft.AspNetCore.Components.Authorization @using Microsoft.AspNetCore.Components.WebAssembly.Authentication @using G2_Field.Shared<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">TelerikDrawer＠<跨度类="hljs-attr" style="color: #ff0000">裁判=<跨度类="hljs-string" style="color: #a31515">“@Drawer”<跨度类="hljs-attr" style="color: #ff0000">数据=<跨度类="hljs-string" style="color: #a31515">“@items”<跨度类="hljs-attr" style="color: #ff0000">MiniMode=<跨度类="hljs-string" style="color: #a31515">“假”<跨度类="hljs-attr" style="color: #ff0000">模式=<跨度类="hljs-string" style="color: #a31515">“@DrawerMode。覆盖”<跨度类="hljs-attr" style="color: #ff0000">TItem=<跨度类="hljs-string" style="color: #a31515">“DrawerItem”<跨度类="hljs-attr" style="color: #ff0000">SelectedItemChanged=<跨度类="hljs-string" style="color: #a31515">“@OnItemSelect”＠<跨度类="hljs-attr" style="color: #ff0000">bind-Expanded=<跨度类="hljs-string" style="color: #a31515">“@Expanded”><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">模板<跨度类="hljs-attr" style="color: #ff0000">上下文=<跨度类="hljs-string" style="color: #a31515">“AuthDrawerContext”><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">div<跨度类="hljs-attr" style="color: #ff0000">类=<跨度类="hljs-string" style="color: #a31515">“k-drawer-items”<跨度类="hljs-attr" style="color: #ff0000">角色=<跨度类="hljs-string" style="color: #a31515">“菜单条”<跨度类="hljs-attr" style="color: #ff0000">aria-orientation=<跨度类="hljs-string" style="color: #a31515">“垂直”><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">ul>＠为each (var item在AuthDrawerContext) {var selectedClass = item == SelectedItem ?"k-state-selected": string.Empty;<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">李＠<跨度类="hljs-attr" style="color: #ff0000">onclick=<跨度类="hljs-string" style="color: #a31515">"@(() => OnItemSelect(item))"<跨度类="hljs-attr" style="color: #ff0000">类=<跨度类="hljs-string" style="color: #a31515">“k-drawer-item @selectedClass”><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">div<跨度类="hljs-attr" style="color: #ff0000">类=<跨度类="hljs-string" style="color: #a31515">“k-level @ (item.Level)”><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">TelerikIcon<跨度类="hljs-attr" style="color: #ff0000">图标=<跨度类="hljs-string" style="color: #a31515">“@item。图标”><跨度类="hljs-tag" style="color: #0000ff">TelerikIcon><跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">跨度<跨度类="hljs-attr" style="color: #ff0000">类=<跨度类="hljs-string" style="color: #a31515">“k-item-text”>＠item。文本<跨度类="hljs-tag" style="color: #0000ff">跨度><跨度类="hljs-tag" style="color: #0000ff">div>＠如果（项目。展开&& (item.Children?.Any() ??假)){<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">跨度<跨度类="hljs-attr" style="color: #ff0000">类=<跨度类="hljs-string" style="color: #a31515">“k-icon k-i-arrow-chevron-down”<跨度类="hljs-attr" style="color: #ff0000">风格=<跨度类="hljs-string" style="color: #a31515">位置:绝对的;右:0;行高:继承;边距:0 8px"><跨度类="hljs-tag" style="color: #0000ff">跨度>｝其他的如果（!展开&& (item.Children?.Any() ??假)){<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">跨度<跨度类="hljs-attr" style="color: #ff0000">类=<跨度类="hljs-string" style="color: #a31515">“k-icon k-i-arrow-chevron-right”<跨度类="hljs-attr" style="color: #ff0000">风格=<跨度类="hljs-string" style="color: #a31515">位置:绝对的;右:0;行高:继承;边距:0 8px"><跨度类="hljs-tag" style="color: #0000ff">跨度>｝<跨度类="hljs-tag" style="color: #0000ff">李>｝<跨度类="hljs-tag" style="color: #0000ff">ul><跨度类="hljs-tag" style="color: #0000ff">div><跨度类="hljs-tag" style="color: #0000ff">模板><跨度类="hljs-tag" style="color: #0000ff">TelerikDrawer>＠code{[参数]公共列表<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">DrawerItem>Items {get;设置;公共TelerikDrawer<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">DrawerItem>抽屉{get;设置;}公共DrawerItem SelectedItem {get;设置;}公共bool扩展{get;设置;} = true;公共列表<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">DrawerItem>数据{获取;设置;} = new List<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">DrawerItem>{新DrawerItem {Text ="HOME"， Icon = Telerik.Blazor.IconName。窗口，Description = "Home"， URL = ""}};public async Task ToggleDrawer() => await Drawer.ToggleAsync();OnInitialized() {items = Data;SelectedItem = items.First();StateHasChanged ();}公共void OnHover(){}公共async任务RefreshMenu(列表<跨度类="hljs-tag" style="color: #0000ff"><<跨度类="hljs-name" style="color: #0000ff">DrawerItem>Di) {items = Di;｝

处理:

画开放

画封闭