頂部有菜單的 Blazor 模板

我從 VS2019 模板創建了一個新的 blazor 應用程序，該模板將菜單作為側邊欄。我花了一大早上的時間試圖讓菜單像目前的 MVC 模板一樣位於頁面頂部，但完全沒能到達任何地方！

有沒有人有一個從側面和頂部刪除導航欄的 Blazor 模板？

Blazor 中的側邊欄並沒有什麼特別之處。如果您檢查MainLayout.razor，您將看到對帶有sidebar類的 NavMenu 組件的引用：

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

如果你打開NavMenu.razor你會看到它只是一個Bootstrap Navbar，方便地打包在一個可重用的組件中。

更新

Blazor 使用 Bootstrap 使其餘問題成為樣式表問題，而不是 Blazor 問題。

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 {
   white-space: normal;
   text-align: center;
   word-break: break-all;
 }
...

4. 修改 BlazorShared\MainLayout.razor以模仿 Razor 中的結構Shared\_Layout.cshtml：

@inherits LayoutComponentBase


<header>
 <NavMenu />
</header>

<div class="container">
   <main role="main" class="pb-3">
       @Body
   </main>
</div>

此處沒有頁腳，因為 Blazor 模板中沒有Privacy頁面。

5. 修改Shared\NavMenu.razor以使用 Razor 模板的結構和样式。<a>元素需要被NavLink元素替換。另一個棘手的部分是 Razor 中的切換器通過data-toggle="collapse" data-target在 Blazor 中不起作用的屬性工作。這就是需要點擊處理程序的原因：

<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>

點擊處理程序只需將collapse類添加或刪除從 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;
   }
}

這會產生一個水平菜單，右側有一個切換器：

引用自：https://stackoverflow.com/questions/58235005