Skip to content

Commit 8e51e37

Browse files
ArgoZhangArgoZhang
authored
feat(Navbar): add Navbar component (dotnetcore#6586)
* feat: 增加 Navbar 组件 * feat: 增加 NavBrand 组件 * doc: 增加菜单 * doc: 增加 Navbar 示例页面 * doc: 调整菜单顺序 * refactor: 增加子组件 * doc: 更新示例 * refactor: 更改 Color 默认值 * doc: 更新网站 header 样式 * feat: 增加 ToggleButton 组件 * feat: 增加 Group 组件 * feat: 增加 Collapse 组件 * feat: 增加 Item 组件 * feat: 增加 Brand 组件 * feat: 增加 Navbar 组件 * doc: 更新文档 * style: 增加响应式样式 * doc: 增加注释 * test: 增加单元测试 * doc: 更新注释文档 * refactor: 移除 sealed 关键字 * style: 更新阴影样式 * refactor: 增加 NavbarLink 组件 * test: 更新单元测试 * refactor: 复用 HandlerClick 方法 * doc: 更新示例 * test: 更新单元测试 * feat: 增加 NavbarDropdown 组件 * refactor: 更改 Size 默认值 * doc: 更新示例 * feat: 增加方向与对其方式参数 * doc: 更新示例 * test: 更新单元测试 * refactor: 精简代码 * doc: 更新文档 * refactor: 更新代码消除警告信息 * style: 更新 Dropdown 组件样式 * style: 更新样式 * feat: 增加 IsScrolling 参数 * refactor: 更新示例 * test: 更新单元测试 * feat: 增加高度参数 * style: 增加左右间隙 * doc: 更新文档说明 * refactor: 增加 Home 动画特效
1 parent e88f9f0 commit 8e51e37

30 files changed

+774
-4
lines changed

‎src/BootstrapBlazor.Server/Components/Samples/Navbars.razor‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
@page "/navbar"
2+
@inject IStringLocalizer<Navbars> Localizer
3+
4+
<h3>@Localizer["NavbarTitle"]</h3>
5+
6+
<h4>@Localizer["NavbarDescription"]</h4>
7+
8+
<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
9+
<Navbar>
10+
<NavbarBrand>
11+
<a>Navbar</a>
12+
</NavbarBrand>
13+
<NavbarToggleButton Target="#test"></NavbarToggleButton>
14+
<NavbarCollapse Id="test">
15+
<NavbarGroup IsScrolling="true">
16+
<NavbarLink>Home</NavbarLink>
17+
<NavbarLink Text="Link"></NavbarLink>
18+
<NavbarDropdown Text="Dropdown">
19+
<NavbarDropdownItem>
20+
<i class="fa-solid fa-fw fa-home"></i><span>Action</span>
21+
</NavbarDropdownItem>
22+
<NavbarDropdownItem>
23+
<i class="fa-solid fa-fw fa-flag"></i><span>Another action</span>
24+
</NavbarDropdownItem>
25+
<NavbarDropdownDivider></NavbarDropdownDivider>
26+
<NavbarDropdownItem>
27+
<i class="fa-solid fa-fw fa-home"></i><span>Something else here</span>
28+
</NavbarDropdownItem>
29+
</NavbarDropdown>
30+
<NavbarLink IsDisabled="true">Disabled</NavbarLink>
31+
<NavbarItem>
32+
<a class="nav-link">About</a>
33+
</NavbarItem>
34+
</NavbarGroup>
35+
<NavbarGroup>
36+
<ValidateForm class="d-flex" role="search" Model="_searchModel" OnValidSubmit="OnValidSubmit">
37+
<BootstrapInput class="me-2" placeholder="Search" @bind-Value="_searchModel.SearchText"
38+
ShowLabel="false" SkipValidate="true"></BootstrapInput>
39+
<Button Color="Color.Success" IsOutline="true" ButtonType="ButtonType.Submit">Search</Button>
40+
</ValidateForm>
41+
</NavbarGroup>
42+
</NavbarCollapse>
43+
</Navbar>
44+
<section ignore>
45+
<p class="code-label">Nav</p>
46+
<ul class="ul-demo mb-3">
47+
<li><code>Size</code>: 指定导航栏响应阈值，默认 <code>Size.Medium</code></li>
48+
<li><code>BackgroundColorCssClass</code>: 导航栏背景色样式，默认 null 未设置使用 <code>bg-body-tertiary</code></li>
49+
</ul>
50+
<p class="code-label">NavbarBrand</p>
51+
<p>渲染 <code>navbar-brand</code> 样式，导航栏 Brand 当屏幕宽度小于特定阈值时导航栏会响应式收起，<code>NavbarBrand</code> 的内容始终显示</p>
52+
<p class="code-label">NavbarToggleButton</p>
53+
<p>渲染 <code>navbar-toggler</code> 样式，导航栏中的折叠展开按钮，当屏幕宽度小于特定阈值时显示，通过设置参数 <code>Target</code> 值指定折叠展开组件 <code>NavbarCollapse</code></p>
54+
<p class="code-label">NavbarCollapse</p>
55+
<p>渲染 <code>collapse navbar-collapse</code> 样式，导航栏中的可折叠展开区域，通过设置参数 <code>Id</code> 值，与组件 <code>NavbarToggleButton</code> 联动</p>
56+
<p class="code-label">NavbarGroup</p>
57+
<p>渲染 <code>navbar-nav</code> 样式，导航栏中区域分组容器组件</p>
58+
<ul class="ul-demo">
59+
<li><code>IsScrolling</code>: 是否开启滚动条</li>
60+
<li><code>Height</code>: 组件高度，默认 <b>200px</b></li>
61+
</ul>
62+
<p class="code-label">NavbarItem</p>
63+
<p>渲染 <code>navbar-item</code> 样式，导航栏中单项容器组件，通过内置自定义组件或者 <code>Html</code> 实现导航项</p>
64+
<p class="code-label">NavbarLink</p>
65+
<p>渲染 <code>nav-link</code> 样式，导航栏中导航组件，内部渲染为 <code>a</code> 链接</p>
66+
<ul class="ul-demo">
67+
<li><code>Url</code>: 导航地址</li>
68+
<li><code>Target</code>: 导航目标</li>
69+
<li><code>ImageUrl</code>: 图片地址</li>
70+
<li><code>ImageCss</code>: 图片样式</li>
71+
</ul>
72+
<p class="code-label">NavbarDropdown</p>
73+
<p>渲染 <code>nav-item dropdown</code> 样式，导航栏中下拉菜单组件</p>
74+
<p class="code-label">NavbarDropdownItem</p>
75+
<p>渲染 <code>dropdown-item</code> 样式，导航栏中下拉菜单组件内项目</p>
76+
</section>
77+
</DemoBlock>

‎src/BootstrapBlazor.Server/Components/Samples/Navbars.razor.cs‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the Apache 2.0 License
3+
// See the LICENSE file in the project root for more information.
4+
// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
5+
6+
using Microsoft.AspNetCore.Components.Forms;
7+
8+
namespace BootstrapBlazor.Server.Components.Samples;
9+
10+
/// <summary>
11+
/// Navbar 示例
12+
/// </summary>
13+
public partial class Navbars
14+
{
15+
private List<SelectedItem> _dropdownItems = [];
16+
private SearchModel _searchModel = new SearchModel();
17+
18+
/// <summary>
19+
/// <inheritdoc/>
20+
/// </summary>
21+
protected override void OnInitialized()
22+
{
23+
base.OnInitialized();
24+
25+
_dropdownItems.AddRange([
26+
new SelectedItem() { Text="Item1", Value="0"},
27+
new SelectedItem() { Text="Item2", Value="1"},
28+
new SelectedItem() { Text="Item3", Value="2"}
29+
]);
30+
}
31+
32+
private Task OnValidSubmit(EditContext context)
33+
{
34+
return Task.CompletedTask;
35+
}
36+
37+
class SearchModel
38+
{
39+
public string? SearchText { get; set; }
40+
}
41+
}

‎src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1458,6 +1458,12 @@ void AddLayout(DemoMenuItem item)
14581458
Url = "footer"
14591459
},
14601460
new()
1461+
{
1462+
IsNew = true,
1463+
Text = Localizer["Navbar"],
1464+
Url = "navbar"
1465+
},
1466+
new()
14611467
{
14621468
Text = Localizer["Row"],
14631469
Url = "row"

‎src/BootstrapBlazor.Server/Locales/en-US.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4847,7 +4847,8 @@
48474847
"SocketDataEntity": "DataEntity",
48484848
"NetworkMonitor": "Network Monitor",
48494849
"Toolbar": "Toolbar",
4850-
"OpcDaService": "OpcDaServer"
4850+
"OpcDaService": "OpcDaServer",
4851+
"Navbar": "Navbar"
48514852
},
48524853
"BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
48534854
"TablesHeaderTitle": "Header grouping function",
@@ -7165,5 +7166,11 @@
71657166
"OpcDaDescription": "Connect to OpcDa Server to obtain PLC real-time data",
71667167
"OpcDaNormalTitle": "Basic usage",
71677168
"OpcDaNormalIntro": "Get an instance by injecting the service <code>IOpcDaServer</code> and call the <code>Read</code> method to get the PLC Tag value."
7169+
},
7170+
"BootstrapBlazor.Server.Components.Samples.Navbars": {
7171+
"NavbarTitle": "Navbar",
7172+
"NavbarDescription": "A powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more",
7173+
"NormalTitle": "Basic usage",
7174+
"NormalIntro": "By setting <code>NavbarBrand</code> <code>NavbarToggleButton</code> <code>NavbarCollapse</code> <code>NavbarGroup</code> <code>NavbarItem</code> to layout its internal elements"
71687175
}
71697176
}

‎src/BootstrapBlazor.Server/Locales/zh-CN.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4847,7 +4847,8 @@
48474847
"SocketDataEntity": "通讯数据转实体类",
48484848
"NetworkMonitor": "网络状态 NetworkMonitor",
48494849
"Toolbar": "工具栏 Toolbar",
4850-
"OpcDaService": "OpcDaServer 服务"
4850+
"OpcDaService": "OpcDaServer 服务",
4851+
"Navbar": "导航栏 Navbar"
48514852
},
48524853
"BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
48534854
"TablesHeaderTitle": "表头分组功能",
@@ -7165,5 +7166,11 @@
71657166
"OpcDaDescription": "连接 OpcDa Server 获得 PLC 实时数据",
71667167
"OpcDaNormalTitle": "基本用法",
71677168
"OpcDaNormalIntro": "通过注入服务 <code>IOpcDaServer</code> 获得实例，调用 <code>Read</code> 方法获得 PLC 位号值"
7169+
},
7170+
"BootstrapBlazor.Server.Components.Samples.Navbars": {
7171+
"NavbarTitle": "Navbar 导航栏",
7172+
"NavbarDescription": "是网站开发中用于定义顶部导航区域或主页快速启动区域的结构化组件",
7173+
"NormalTitle": "基本用法",
7174+
"NormalIntro": "通过设置 <code>NavbarBrand</code> <code>NavbarToggleButton</code> <code>NavbarCollapse</code> <code>NavbarGroup</code> <code>NavbarItem</code> 对其内部元素布局"
71687175
}
71697176
}

‎src/BootstrapBlazor.Server/docs.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -250,7 +250,8 @@
250250
"socket/data-entity": "Sockets\\DataEntities",
251251
"network-monitor": "NetworkMonitors",
252252
"toolbar": "Toolbars",
253-
"opc-da": "OpcDa"
253+
"opc-da": "OpcDa",
254+
"navbar": "Navbars"
254255
},
255256
"video": {
256257
"table": "BV1ap4y1x7Qn?p=1",

‎src/BootstrapBlazor.Server/wwwroot/css/site.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ html .search-dialog-mask {
5252
--bb-global-search-main-max-height: calc(100vh - 310px);
5353
}
5454

55-
.navbar {
55+
.navbar-header {
5656
--bs-navbar-color: rgba(255,255,255,.85);
5757
--bs-navbar-hover-color: rgb(255,255,255);
5858
}

‎src/BootstrapBlazor/Components/Dropdown/Dropdown.razor.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
11
[data-bs-theme='dark'] .dropdown-menu {
22
--bs-dropdown-bg: #{$bs-dropdown-bg-dark};
33
}
4+
5+
.dropdown-item {
6+
> i + span {
7+
margin-inline-start: 0.25rem;
8+
}
9+
}

‎src/BootstrapBlazor/Components/Navbar/Navbar.razor‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@namespace BootstrapBlazor.Components
2+
@inherits BootstrapComponentBase
3+
4+
<nav @attributes="@AdditionalAttributes" class="@ClassString">
5+
<div class="container-fluid">
6+
@ChildContent
7+
</div>
8+
</nav>

‎src/BootstrapBlazor/Components/Navbar/Navbar.razor.cs‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the Apache 2.0 License
3+
// See the LICENSE file in the project root for more information.
4+
// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
5+
6+
namespace BootstrapBlazor.Components;
7+
8+
/// <summary>
9+
/// Navbar 组件
10+
/// </summary>
11+
public partial class Navbar
12+
{
13+
/// <summary>
14+
/// 获得/设置 组件大小 默认 <see cref="Size.Medium"/>
15+
/// </summary>
16+
[Parameter]
17+
public Size Size { get; set; } = Size.Medium;
18+
19+
/// <summary>
20+
/// 获得/设置 背景色样式名称 默认 null 未设置
21+
/// </summary>
22+
[Parameter]
23+
public string? BackgroundColorCssClass { get; set; }
24+
25+
/// <summary>
26+
/// 获得/设置 子组件模板
27+
/// </summary>
28+
[Parameter]
29+
public RenderFragment? ChildContent { get; set; }
30+
31+
/// <summary>
32+
/// 获得 组件样式
33+
/// </summary>
34+
private string? ClassString => CssBuilder.Default("navbar")
35+
.AddClass($"navbar-expand", Size == Size.None)
36+
.AddClass($"navbar-expand-{Size.ToDescriptionString()}", Size != Size.None)
37+
.AddClass(BackgroundColorCssClass)
38+
.AddClass("bg-body-tertiary", string.IsNullOrEmpty(BackgroundColorCssClass))
39+
.AddClassFromAttributes(AdditionalAttributes)
40+
.Build();
41+
}
42+

0 commit comments

Comments
 (0)