今天介紹最後的四個元件NavMenu
、NavLink
、MainLayout
和 LayoutView
這是專案建立時預設提供的 razor 元件,並不是被放在命名空間 Microsoft.AspNetCore.Components
,用途就是呈現左側的導覽選單
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| <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#
轉譯錨點標記的元件,NavLink
的行為和 <a>
標籤相同區別在於會自動地依照 href
比對目前的 URI 來切換 active
1
| <NavLink href="examplePage" target="_blank">Example page</NavLink>
|
MainLayout#
這個元件也是在專案建立時產生,位置在 Shared/MainLayout.razor
,這個元件也是 App.razor
預設的布局元件
![](https://i.imgur.com/I3KpZEl.png)
LayoutView#
如果你想要去改動版面配置可以使用 LayoutView
元件來達成
在 LayoutView
的 Layout
屬性內修改想要的布局即可
到此就完成了 26 個 Blazor 框架預設的元件介紹,明天就是最後一天我們來說說 Blazor 的部署