BootstrapBlazor实战 Menu 导航菜单使用(1)

实战BootstrapBlazorMenu 导航菜单的使用, 以及整合Freesql orm快速制作菜单项数据库后台维护页面

demo演示的是Sqlite驱动,FreeSql支持多种数据库，MySql/SqlServer/PostgreSQL/Oracle/Sqlite/Firebird/达梦/神通/人大金仓/翰高/华为GaussDB/MsAccess

1.Menu 导航菜单

为页面和功能提供导航的菜单列表。

@code{  //演示数据  private IEnumerable<MenuItem>? Items { get; set; } = new List<MenuItem>             {                  new MenuItem() { Text = "维保管理", Icon = "fa fa-address-book", Url = "/"  , Match = NavLinkMatch.All},                 new MenuItem() { Text = "车主", Icon = "fa fa-address-book", Url = "/owners" ,Items=new List<MenuItem>() {                     new MenuItem() { Text = "车主列表", Icon = "fa fa-address-book", Url = "/owners"  , Match = NavLinkMatch.All},                     new MenuItem() { Text = "车主添加", Icon = "fa fa-address-book", Url = "/owners/add"  , Match = NavLinkMatch.All},                 }},                 new MenuItem() { Text = "车辆", Icon = "fa fa-fw fa-car", Url = "/cars" },                 new MenuItem() { Text = "保险", Icon = "fa fa-fw fa-fa", Url = "/insurans"},                 new MenuItem() { Text = "出险记录", Icon = "fa fa-map-o", Url = "/insurancerecords"},                 new MenuItem() { Text = "花名册", Icon = "fa fa-fw fa-users", Url = "users" }             }; } 

顶栏

适用广泛的基础用法。

<Menu Items="@Items" DisableNavigation="true" OnClick="@OnClickMenu" />  @code{  private Task OnClickMenu(MenuItem item)     {         System.Console.WriteLine($"菜单点击项: {item.Text}");         return Task.CompletedTask;     } } 

底栏

设置参数 IsBottom 值为 true 菜单栏在容器底部，适用移动端

<div style="height: 120px">     <Menu Items="@Items" DisableNavigation="true" IsBottom="true" /> </div> 

带图标的顶栏菜单

适用简单的网站应用，通过设置菜单项 MenuItem 的 Icon 属性设置菜单图标

new MenuItem() { Text = "维保管理", Icon = "fa fa-address-book"}  

侧栏

适用于左右结构布局的网站，通过设置 IsVertical 更改导航菜单为侧栏

<div style="width:220px; border-right: 1px solid #e6e6e6; padding-right: 4px;">     <Menu Items="@Items" DisableNavigation="true" IsVertical="true" /> </div> 

带图标的侧栏菜单

通过设置菜单项 MenuItem 的 Icon 属性设置菜单图标

<div style="width:220px;">     <Menu Items="@Items" DisableNavigation="true" IsVertical="true" style="border-right: 1px solid #e6e6e6;" /> </div> 

手风琴效果的侧栏

通过设置 IsAccordion 属性设置手风琴特效侧栏菜单

<div style="width:220px;">     <Menu Items="@Items" DisableNavigation="true" IsVertical="true" IsAccordion="true" style="border-right: 1px solid #e6e6e6;" /> </div> 

动态更改菜单

通过代码动态设置 Items 属性值更改菜单项

<div class="mt-3" style="width:220px;">     <Menu Items="@DynamicSideMenuItems" DisableNavigation="true" IsVertical="true" style="border-right: 1px solid #e6e6e6;" /> </div> <Button Text="更新菜单" OnClick="UpdateMenu" /> <Button Text="重置菜单" OnClick="ResetMenu" />  @code{      private IEnumerable<MenuItem>? DynamicSideMenuItems { get; set; }      private Task UpdateMenu()     {         DynamicSideMenuItems = new List<MenuItem>             {                  new MenuItem() { Text = "维保管理", Icon = "fa fa-address-book", Url = "/"  , Match = NavLinkMatch.All},                 new MenuItem() { Text = "车主", Icon = "fa fa-address-book", Url = "/owners" ,Items=new List<MenuItem>() {                     new MenuItem() { Text = "车主列表", Icon = "fa fa-address-book", Url = "/owners"  , Match = NavLinkMatch.All},                     new MenuItem() { Text = "车主添加", Icon = "fa fa-address-book", Url = "/owners/add"  , Match = NavLinkMatch.All},                 }}             };         return Task.CompletedTask;     }      private async Task ResetMenu()     {         DynamicSideMenuItems = new List<MenuItem>             {                  new MenuItem() { Text = "维保管理", Icon = "fa fa-address-book", Url = "/"  , Match = NavLinkMatch.All},                 new MenuItem() { Text = "保险", Icon = "fa fa-fw fa-fa", Url = "/insurans"},                 new MenuItem() { Text = "出险记录", Icon = "fa fa-map-o", Url = "/insurancerecords"},                 new MenuItem() { Text = "花名册", Icon = "fa fa-fw fa-users", Url = "users" }             };         return Task.CompletedTask;     } } 

等等….

在这里篇幅有限不一一介绍,更多使用说明参考 https://www.blazor.zone/menus