Skip to content

Commit 33e2aee

Browse files
ArgoZhangArgoZhang
authored
feat(Toolbar): add Toolbar component (#6547)
* feat: 增加 Toolbar 组件 * refactor: 增加命名空间 * doc: 增加本地化 * doc: 增加源码映射 * doc: 增加工具栏菜单 * doc: 增加工具栏示例 * refactor: 更新内部实现逻辑 * doc: 更新示例 * doc: 增加注释 * refactor: 重构组件名称 * doc: 更新示例 * feat(CheckboxLIst): support ItemTemplate on Button mode * refactor: 代码格式化 * feat(RadioLIst): support ItemTemplate on Button mode * feat: 增加 IsWrap 参数 * doc: 更新示例 * doc: 更新示例 * feat(CheckboxList): add ShowButtonBorderColor parameter * feat(RadioList): add ShowButtonBorderColor parameter * refactor: 精简样式名称 * test: 更新示例 * test: 增加单元测试 * chore: bump version 9.9.1-beta06 * test: 更新单元测试 * test: 增加功能测试 * revert: 撤销更改 * test: 增加单元测试 * refactor: 增加 disposing 参数使用 * refactor: 更改代码消除异常 * doc: 更新样式 * test: 增加单元测试 * test: 增加单元测试 * test: 增加单元测试 * test: 增加单元测试
1 parent 0b6c36e commit 33e2aee

30 files changed

+479
-38
lines changed

‎src/BootstrapBlazor.Server/Components/Pages/Index.razor

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
<section class="bd-masthead">
88
<div class="container-xxl bd-gutter">
9-
<div class="col-md-8 mx-auto text-center">
9+
<div class="text-center d-flex align-items-center flex-column">
1010
<a class="d-inline-flex text-dark text-decoration-none" href="https://github.com/dotnetcore/BootstrapBlazor?wt.mc_id=DT-MVP-5004174" rel="noopener" target="_blank">
1111
<span class="py-2 px-3 rounded-5 masthead-notice">
1212
@Localizer["Support"]

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@page "/affix"
2+
@using Microsoft.AspNetCore.Components.Rendering
23

34
<h3>@Localizer["AffixTitle"]</h3>
45

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
@page "/toolbar"
2+
@inject IStringLocalizer<Toolbars> Localizer
3+
4+
<h3>@Localizer["ToolbarsTitle"]</h3>
5+
6+
<h4>@((MarkupString)Localizer["ToolbarSubTitle"].Value)</h4>
7+
8+
<DemoBlock Title="@Localizer["NormalTitle"]"
9+
Introduction="@Localizer["NormalIntro"]"
10+
Name="Normal">
11+
<Toolbar IsWrap="true">
12+
<ToolbarItem>
13+
<Button Icon="fa-solid fa-wand-magic-sparkles" IsOutline="true"></Button>
14+
</ToolbarItem>
15+
<ToolbarItem>
16+
<CheckboxList IsButton="true" Items="_items2" @bind-Value="_item2" ShowButtonBorderColor="true">
17+
<ItemTemplate>
18+
<i class="@GetRadioIconByItem(context.Value)"></i>
19+
</ItemTemplate>
20+
</CheckboxList>
21+
</ToolbarItem>
22+
<ToolbarItem>
23+
<RadioList IsButton="true" Items="_items1" @bind-Value="_item1" ShowButtonBorderColor="true">
24+
<ItemTemplate>
25+
<i class="@GetIconByItem(context.Value)"></i>
26+
</ItemTemplate>
27+
</RadioList>
28+
</ToolbarItem>
29+
<ToolbarItem>
30+
<Select TValue="int" Color="Color.Primary" IsPopover="true" style="min-width: 120px;">
31+
<Options>
32+
<SelectOption Value="1" Text="Text 1"></SelectOption>
33+
<SelectOption Value="2" Text="Text 2"></SelectOption>
34+
<SelectOption Value="3" Text="Text 3"></SelectOption>
35+
</Options>
36+
</Select>
37+
</ToolbarItem>
38+
<ToolbarItem>
39+
<Dropdown TValue="string" Value="@_item3" Items="_items3" IsPopover="true"></Dropdown>
40+
</ToolbarItem>
41+
<ToolbarSpace></ToolbarSpace>
42+
<ToolbarButtonGroup>
43+
<Button Icon="fa-solid fa-save" IsOutline="true"></Button>
44+
<Button Icon="fa-solid fa-save" IsOutline="true"></Button>
45+
<Button Icon="fa-solid fa-save" IsOutline="true"></Button>
46+
</ToolbarButtonGroup>
47+
<ToolbarSeparator></ToolbarSeparator>
48+
<ToolbarButtonGroup>
49+
<Button Icon="fa-solid fa-save"></Button>
50+
<Button Icon="fa-solid fa-save"></Button>
51+
<Button Icon="fa-solid fa-save"></Button>
52+
</ToolbarButtonGroup>
53+
</Toolbar>
54+
</DemoBlock>

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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.Server.Components.Samples;
7+
8+
/// <summary>
9+
/// Toolbar 组件示例代码
10+
/// </summary>
11+
public partial class Toolbars
12+
{
13+
private readonly List<SelectedItem> _items1 = [];
14+
private string _item1 = "1,2";
15+
16+
private readonly List<SelectedItem> _items2 = [];
17+
private string _item2 = "1";
18+
19+
private readonly List<SelectedItem> _items3 = [];
20+
private string _item3 = "1";
21+
22+
/// <summary>
23+
/// <inheritdoc/>
24+
/// </summary>
25+
protected override void OnInitialized()
26+
{
27+
base.OnInitialized();
28+
29+
_items1.Add(new SelectedItem("1", "Text1"));
30+
_items1.Add(new SelectedItem("2", "Text2"));
31+
_items1.Add(new SelectedItem("3", "Text3"));
32+
33+
_items2.Add(new SelectedItem("1", "Text1"));
34+
_items2.Add(new SelectedItem("2", "Text2"));
35+
_items2.Add(new SelectedItem("3", "Text3"));
36+
37+
_items3.Add(new SelectedItem("1", "Text1"));
38+
_items3.Add(new SelectedItem("2", "Text2"));
39+
_items3.Add(new SelectedItem("3", "Text3"));
40+
}
41+
42+
private static string GetIconByItem(string v) => v switch
43+
{
44+
"1" => "fa-solid fa-align-left",
45+
"2" => "fa-solid fa-align-center",
46+
_ => "fa-solid fa-align-right"
47+
};
48+
49+
private static string GetRadioIconByItem(string v) => v switch
50+
{
51+
"1" => "fa-solid fa-bold",
52+
"2" => "fa-solid fa-italic",
53+
_ => "fa-solid fa-font"
54+
};
55+
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1486,6 +1486,12 @@ void AddLayout(DemoMenuItem item)
14861486
{
14871487
Text = Localizer["Stack"],
14881488
Url = "stack"
1489+
},
1490+
new()
1491+
{
1492+
IsNew = true,
1493+
Text = Localizer["Toolbar"],
1494+
Url = "toolbar"
14891495
}
14901496
};
14911497
AddBadge(item);

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4845,7 +4845,8 @@
48454845
"DataPackageAdapter": "DataPackageAdapter",
48464846
"SocketAutoConnect": "Reconnect",
48474847
"SocketDataEntity": "DataEntity",
4848-
"NetworkMonitor": "Network Monitor"
4848+
"NetworkMonitor": "Network Monitor",
4849+
"Toolbar": "Toolbar"
48494850
},
48504851
"BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
48514852
"TablesHeaderTitle": "Header grouping function",
@@ -7151,5 +7152,11 @@
71517152
"IndicatorLi2": "Yellow: Average network (3G)",
71527153
"IndicatorLi3": "Red: Poor network (2G)",
71537154
"IndicatorLi4": "Gray: Offline"
7155+
},
7156+
"BootstrapBlazor.Server.Components.Samples.Toolbars": {
7157+
"ToolbarsTitle": "Toolbar",
7158+
"ToolbarSubTitle": "ToolBar component is a container for buttons or other application-specific tools",
7159+
"NormalTitle": "Normal",
7160+
"NormalIntro": ""
71547161
}
71557162
}

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4845,7 +4845,8 @@
48454845
"DataPackageAdapter": "数据适配器",
48464846
"SocketAutoConnect": "自动重连",
48474847
"SocketDataEntity": "通讯数据转实体类",
4848-
"NetworkMonitor": "网络状态 NetworkMonitor"
4848+
"NetworkMonitor": "网络状态 NetworkMonitor",
4849+
"Toolbar": "工具栏 Toolbar"
48494850
},
48504851
"BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
48514852
"TablesHeaderTitle": "表头分组功能",
@@ -7151,5 +7152,11 @@
71517152
"IndicatorLi2": "黄色：网络一般 (3G)",
71527153
"IndicatorLi3": "红色：网络差 (2G)",
71537154
"IndicatorLi4": "灰色：离线状态"
7155+
},
7156+
"BootstrapBlazor.Server.Components.Samples.Toolbars": {
7157+
"ToolbarsTitle": "Toolbar 工具栏",
7158+
"ToolbarSubTitle": "是按钮或其他应用程序特定工具的容器",
7159+
"NormalTitle": "基本用法",
7160+
"NormalIntro": ""
71547161
}
71557162
}

‎src/BootstrapBlazor.Server/docs.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,8 @@
248248
"socket/adapter": "Sockets\\Adapters",
249249
"socket/auto-connect": "Sockets\\AutoReconnects",
250250
"socket/data-entity": "Sockets\\DataEntities",
251-
"network-monitor": "NetworkMonitors"
251+
"network-monitor": "NetworkMonitors",
252+
"toolbar": "Toolbars"
252253
},
253254
"video": {
254255
"table": "BV1ap4y1x7Qn?p=1",

‎src/BootstrapBlazor/Components/Checkbox/CheckboxList.razor

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,14 @@
1515
{
1616
<DynamicElement TagName="span" TriggerClick="!IsDisabled" OnClick="() => OnClick(item)"
1717
class="@GetButtonItemClassString(item)">
18-
@item.Text
18+
@if (ItemTemplate != null)
19+
{
20+
@ItemTemplate(item)
21+
}
22+
else
23+
{
24+
@item.Text
25+
}
1926
</DynamicElement>
2027
}
2128
</div>

‎src/BootstrapBlazor/Components/Checkbox/CheckboxList.razor.cs

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,9 @@ public partial class CheckboxList<TValue> : ValidateBase<TValue>
3838
.Build();
3939

4040
private string? GetButtonItemClassString(SelectedItem item) => CssBuilder.Default("btn")
41-
.AddClass($"btn-outline-{Color.ToDescriptionString()}")
42-
.AddClass($"active", CurrentValueAsString.Split(',', StringSplitOptions.RemoveEmptyEntries).Contains(item.Value))
41+
.AddClass($"border-secondary", !ShowButtonBorderColor)
42+
.AddClass($"border-{Color.ToDescriptionString()}", ShowButtonBorderColor)
43+
.AddClass($"active bg-{Color.ToDescriptionString()}", CurrentValueAsString.Split(',', StringSplitOptions.RemoveEmptyEntries).Contains(item.Value))
4344
.Build();
4445

4546
/// <summary>
@@ -55,14 +56,20 @@ public partial class CheckboxList<TValue> : ValidateBase<TValue>
5556
[Parameter]
5657
public bool IsButton { get; set; }
5758

59+
/// <summary>
60+
/// 获得/设置 是否显示按钮边框颜色 默认为 false
61+
/// </summary>
62+
[Parameter]
63+
public bool ShowButtonBorderColor { get; set; }
64+
5865
/// <summary>
5966
/// 获得/设置 Checkbox 组件布局样式
6067
/// </summary>
6168
[Parameter]
6269
public string? CheckboxItemClass { get; set; }
6370

6471
/// <summary>
65-
/// 获得/设置 是否显示边框 默认为 true
72+
/// 获得/设置 非按钮模式下是否显示组件边框 默认为 true
6673
/// </summary>
6774
[Parameter]
6875
public bool ShowBorder { get; set; } = true;

0 commit comments

Comments
 (0)