顶部带有菜单的 Blazor 模板 [英] Blazor template with menu across the top

问题描述

我从 VS2019 模板创建了一个新的 blazor 应用程序，该模板将菜单作为侧边栏.我花了上午的大部分时间试图让菜单像当前的 MVC 模板一样位于页面顶部，但完全无法到达任何地方！

有没有人有一个 blazor 模板，导航栏从侧面和顶部移除?

解决方案

Blazor 中的侧边栏并不特别.如果您检查 MainLayout.razor，您将看到对带有 sidebar 类的 NavMenu 组件的引用:

<导航菜单/>

如果您打开 NavMenu.razor，您会看到它只是一个

Blazor 模板的样式表是为这种类似 Explorer 的特定布局构建的 - 左侧是垂直导航栏，右侧是主要区域.颜色、尺寸以及最重要的流量都是为此而设计的.修改单个样式类是不够的.

另一方面，Razor 页面 样式表是为经典"Bootstrap 外观而构建的，菜单在顶部，容器和行在中间，页脚和页眉.这意味着，我们可以从新的 Razor Pages 应用程序借用"样式表和布局.

1. 使用 dotnet new webapp
创建一个新项目
2. 删除 Blazor 的 site.css 中除第一行之外的所有内容:

@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

3. 将 Razor 的 site.css 的内容复制到 Blazor 的 site.css.该文件应如下所示:

@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');a.navbar-brand {空白:正常；文本对齐:居中；断字:断断续续；}...

4. 修改 Blazor 的 SharedMainLayout.razor 以模仿 Razor 的 Shared\_Layout.cshtml 中的结构:

@inherits LayoutComponentBase<标题><导航菜单/></标题><div class="容器"><main role="main" class="pb-3">@身体</main>

此处没有页脚，因为 Blazor 模板中没有 Privacy 页面.

5. 修改 SharedNavMenu.razor 以使用 Razor 模板的结构和样式.

   I've created a new blazor app from the VS2019 template which has the menu as a sidebar. I've spent best part of the morning trying to get the menu across the top of the page like the current MVC template but completely failed to get anywhere!

   Does anyone have a blazor template with the navbar remove from the side and across the top?

   解决方案

   The sidebar in Blazor isn't something special. If you check MainLayout.razor you'll see a reference to a NavMenu component with the sidebar class :

   <div class="sidebar">
       <NavMenu />
   </div>
   

   If you open NavMenu.razor you'll see it's just a Bootstrap Navbar, conveniently packed in a reusable component.

   Update

   Blazor uses Bootstrap which makes the rest of the problem a stylesheet problem, not a Blazor issue.

   The Blazor template's stylesheet was built for this specific Explorer-like layout - a vertical navbar on the left, the main area on the right. The colors, sizes and most importantly, flow, are designed for this. It's not enough to modify a single style class.

   On the other hand, the Razor pages stylesheet was built for the "classic" Bootstrap look with the menu on top, containers and rows in the middle, footers and headers. This means, we can "borrow" the stylesheet and layout from a new Razor Pages application.

   1. Create a new project with dotnet new webapp
   2. Remove everything in Blazor's site.css except the first line :

   @import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
   

   3. Copy the contents of Razor's site.css to Blazor's site.css. The file should look like this :

   @import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
   
   a.navbar-brand {
       white-space: normal;
       text-align: center;
       word-break: break-all;
     }
   ...
   

   4. Modify Blazor's SharedMainLayout.razor to mimic the structure in Razor's Shared\_Layout.cshtml :

   @inherits LayoutComponentBase
   
   
   <header>
     <NavMenu />
   </header>
   
   <div class="container">
       <main role="main" class="pb-3">
           @Body
       </main>
   </div>
   

   No footer here since there's no Privacy page in the Blazor template.

   5. Modify SharedNavMenu.razor to use the structure and styles of the Razor template. <a> elements need to be replaged by NavLink elements. The other tricky part is that the toggler in Razor works through the data-toggle="collapse" data-target attributes which don't work in Blazor. That's why the click handler is needed :

   <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
       <div class="container">
           <a class="navbar-brand" href="">blazornav</a>
           <button class="navbar-toggler" type="button" @onclick="ToggleNavMenu">
               <span class="navbar-toggler-icon"></span>
           </button>
           <div class="@NavMenuCssClass"  @onclick="ToggleNavMenu">
               <ul class="navbar-nav flex-grow-1">
                   <li class="nav-item">
                       <NavLink class="nav-link text-dark" href="" Match="NavLinkMatch.All">
                           <span class="oi oi-home" aria-hidden="true"></span> Home
                       </NavLink>                
                   </li>
                   <li class="nav-item">
                       <NavLink class="nav-link text-dark" href="counter">
                           <span class="oi oi-plus" aria-hidden="true"></span> Counter
                       </NavLink>
                   </li>
                   <li class="nav-item">
                       <NavLink class="nav-link text-dark" href="fetchdata">
                           <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
                       </NavLink>
                   </li>
               </ul>
           </div>
       </div>
   </nav>
   

   The click handler simply adds or removes the collapse class to the base navbar style copied from Razor

   @code {
       bool collapseNavMenu = true;
   
       string baseMenuClass = "navbar-collapse d-sm-inline-flex flex-sm-row-reverse";
   
       string NavMenuCssClass => baseMenuClass + (collapseNavMenu ? " collapse" : "");
   
       void ToggleNavMenu()
       {
           collapseNavMenu = !collapseNavMenu;
       }
   }
   

   This results in a horizontal menu with a toggler on the right:

   这篇关于顶部带有菜单的 Blazor 模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！