本篇文章同步發表於 個人部落格 Jim's Blog
今天介紹最後的四個元件NavMenu
、NavLink
、MainLayout
和 LayoutView
這是專案建立時預設提供的 razor 元件,並不是被放在命名空間 Microsoft.AspNetCore.Components
,用途就是呈現左側的導覽選單
<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">BlazorApp1</a>
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<nav class="flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="fetchdata">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</div>
</nav>
</div>
@code {
private bool collapseNavMenu = true;
private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}
轉譯錨點標記的元件,NavLink
的行為和 <a>
標籤相同區別在於會自動地依照 href
比對目前的 URI 來切換 active
<NavLink href="examplePage" target="_blank">Example page</NavLink>
這個元件也是在專案建立時產生,位置在 Shared/MainLayout.razor
,這個元件也是 App.razor
預設的布局元件
如果你想要去改動版面配置可以使用 LayoutView
元件來達成
在 LayoutView
的 Layout
屬性內修改想要的布局即可
到此就完成了 26 個 Blazor 框架預設的元件介紹,明天就是最後一天我們來說說 Blazor 的部署