Skip to content

Commit 9f4c21d

Browse files
ArgoZhangArgoZhang
authored
feat(ShieldBadge): add ShieldBadge component (#5804)
* doc: 文档注释英语化 * doc: 微调代码块宽度 * doc: 增加代码文件映射 * doc: 增加菜单资源文件 * doc: 增加徽章菜单 * doc: 增加示例 * refactor: 增加组件 * refactor: 增加样式 scss 文件 * doc: 增加示例 * refactor: 调整标签宽度 * test: 增加单元测试
1 parent 4d688cb commit 9f4c21d

File tree

13 files changed

+321
-16
lines changed

13 files changed

+321
-16
lines changed

‎src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545

4646
.card-footer-code ::deep .pre-code {
4747
margin: .5rem;
48+
width: calc(100% - 1rem);
4849
}
4950

5051
.card-footer-control {

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

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
@page "/shield-badge"
2+
@inject IStringLocalizer<ShieldBadges> Localizer
3+
4+
<h3>@Localizer["Title"]</h3>
5+
<h4>@Localizer["SubTitle"]</h4>
6+
7+
<DemoBlock Title="@Localizer["ShieldBadgeNormalTitle"]"
8+
Introduction="@Localizer["ShieldBadgeNormalIntro"]"
9+
Name="Normal">
10+
<section ignore>
11+
<div class="row form-inline g-3">
12+
<div class="col-12 col-sm-4">
13+
<BootstrapInputGroup>
14+
<BootstrapInputGroupLabel DisplayText="Icon" Width="106"></BootstrapInputGroupLabel>
15+
<BootstrapInput @bind-Value="@_icon"></BootstrapInput>
16+
</BootstrapInputGroup>
17+
</div>
18+
<div class="col-12 col-sm-4">
19+
<BootstrapInputGroup>
20+
<BootstrapInputGroupLabel DisplayText="IconColor" Width="106"></BootstrapInputGroupLabel>
21+
<ColorPicker @bind-Value="@_iconColor"></ColorPicker>
22+
</BootstrapInputGroup>
23+
</div>
24+
<div class="col-12 col-sm-4">
25+
</div>
26+
<div class="col-12 col-sm-4">
27+
<BootstrapInputGroup>
28+
<BootstrapInputGroupLabel DisplayText="Label" Width="106"></BootstrapInputGroupLabel>
29+
<BootstrapInput @bind-Value="@_label"></BootstrapInput>
30+
</BootstrapInputGroup>
31+
</div>
32+
<div class="col-12 col-sm-4">
33+
<BootstrapInputGroup>
34+
<BootstrapInputGroupLabel DisplayText="LabelColor" Width="106"></BootstrapInputGroupLabel>
35+
<ColorPicker @bind-Value="@_labelColor"></ColorPicker>
36+
</BootstrapInputGroup>
37+
</div>
38+
<div class="col-12 col-sm-4">
39+
<BootstrapInputGroup>
40+
<BootstrapInputGroupLabel DisplayText="LabelBgColor" Width="106"></BootstrapInputGroupLabel>
41+
<ColorPicker @bind-Value="@_labelBackgroundColor"></ColorPicker>
42+
</BootstrapInputGroup>
43+
</div>
44+
<div class="col-12 col-sm-4">
45+
<BootstrapInputGroup>
46+
<BootstrapInputGroupLabel DisplayText="Text" Width="106"></BootstrapInputGroupLabel>
47+
<BootstrapInput @bind-Value="@_text"></BootstrapInput>
48+
</BootstrapInputGroup>
49+
</div>
50+
<div class="col-12 col-sm-4">
51+
<BootstrapInputGroup>
52+
<BootstrapInputGroupLabel DisplayText="TextColor" Width="106"></BootstrapInputGroupLabel>
53+
<ColorPicker @bind-Value="@_textColor"></ColorPicker>
54+
</BootstrapInputGroup>
55+
</div>
56+
<div class="col-12 col-sm-4">
57+
<BootstrapInputGroup>
58+
<BootstrapInputGroupLabel DisplayText="TextBgColor" Width="106"></BootstrapInputGroupLabel>
59+
<ColorPicker @bind-Value="@_textBackgroundColor"></ColorPicker>
60+
</BootstrapInputGroup>
61+
</div>
62+
<div class="col-12 col-sm-4">
63+
<BootstrapInputGroup>
64+
<BootstrapInputGroupLabel DisplayText="Radius" Width="106"></BootstrapInputGroupLabel>
65+
<Slider @bind-Value="@_radius" Min="0" Max="10" Step="1"></Slider>
66+
</BootstrapInputGroup>
67+
</div>
68+
</div>
69+
</section>
70+
<ShieldBadge Icon="@_icon" IconColor="@_iconColor"
71+
Label="download" LabelColor="@_labelColor" LabelBackgroundColor="@_labelBackgroundColor"
72+
Text="12M" TextColor="@_textColor" TextBackgroundColor="@_textBackgroundColor"
73+
Radius="@_radius"></ShieldBadge>
74+
</DemoBlock>

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
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+
/// ShieldBadge component sample
10+
/// </summary>
11+
public partial class ShieldBadges
12+
{
13+
private string? _icon = "fa-brands fa-github";
14+
private string? _iconColor;
15+
16+
private string? _label = "download";
17+
private string? _labelColor;
18+
private string? _labelBackgroundColor;
19+
20+
private string? _text = "12M";
21+
private string? _textColor;
22+
private string? _textBackgroundColor;
23+
24+
private int _radius = 3;
25+
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -525,6 +525,11 @@ void AddData(DemoMenuItem item)
525525
Url = "badge"
526526
},
527527
new()
528+
{
529+
Text = Localizer["ShieldBadge"],
530+
Url = "shield-badge"
531+
},
532+
new()
528533
{
529534
Text = Localizer["BarcodeReader"],
530535
Url = "barcode-reader"

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3666,6 +3666,12 @@
36663666
"IsPill": "Capsule style",
36673667
"ButtonSpan": "The primary button"
36683668
},
3669+
"BootstrapBlazor.Server.Components.Samples.ShieldBadges": {
3670+
"Title": "ShieldBadge",
3671+
"SubTitle": "Badge component with icon label text like Shields Badge",
3672+
"ShieldBadgeNormalTitle": "Basic usage",
3673+
"ShieldBadgeNormalIntro": "Use <code>Icon</code> to set the icon, <code>Label</code> to set the left text, and <code>Text</code> to set the right text"
3674+
},
36693675
"BootstrapBlazor.Server.Components.Samples.BarcodeReaders": {
36703676
"Title": "BarcodeReader",
36713677
"SubTitle": "This component scans the bar code by calling the camera to obtain the bar code content bar code/QR code",
@@ -4909,7 +4915,8 @@
49094915
"OctIcon": "Oct Icons",
49104916
"UniverIcon": "Univer Icons",
49114917
"Typed": "Typed",
4912-
"UniverSheet": "UniverSheet"
4918+
"UniverSheet": "UniverSheet",
4919+
"ShieldBadge": "ShieldBadge"
49134920
},
49144921
"BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
49154922
"TablesHeaderTitle": "Header grouping function",

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3666,6 +3666,12 @@
36663666
"IsPill": "胶囊样式",
36673667
"ButtonSpan": "主要按钮"
36683668
},
3669+
"BootstrapBlazor.Server.Components.Samples.ShieldBadges": {
3670+
"Title": "ShieldBadge 徽章组件",
3671+
"SubTitle": "带图标标签文本的徽章组件高仿 Shields Badge",
3672+
"ShieldBadgeNormalTitle": "基础用法",
3673+
"ShieldBadgeNormalIntro": "通过 <code>Icon</code> 设置图标，通过 <code>Label</code> 设置左侧文本，通过 <code>Text</code> 设置右侧文本"
3674+
},
36693675
"BootstrapBlazor.Server.Components.Samples.BarcodeReaders": {
36703676
"Title": "BarcodeReader 条码扫描",
36713677
"SubTitle": "本组件通过调用摄像头对条码进行扫描，获取到条码内容条码/QR码",
@@ -4909,7 +4915,8 @@
49094915
"OctIcon": "Oct Icons",
49104916
"UniverIcon": "Univer Icons",
49114917
"Typed": "打字机效果 Typed",
4912-
"UniverSheet": "表格组件 UniverSheet"
4918+
"UniverSheet": "表格组件 UniverSheet",
4919+
"ShieldBadge": "徽章组件 ShieldBadge"
49134920
},
49144921
"BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
49154922
"TablesHeaderTitle": "表头分组功能",

‎src/BootstrapBlazor.Server/docs.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,8 @@
227227
"affix": "Affixs",
228228
"watermark": "Watermarks",
229229
"typed": "Typeds",
230-
"univer-sheet": "UniverSheets"
230+
"univer-sheet": "UniverSheets",
231+
"shield-badge": "ShieldBadges"
231232
},
232233
"video": {
233234
"table": "BV1ap4y1x7Qn?p=1",

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

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,32 @@
66
namespace BootstrapBlazor.Components;
77

88
/// <summary>
9-
/// Badge 徽章组件
9+
/// Badge component
1010
/// </summary>
1111
public partial class Badge
1212
{
13-
/// <summary>
14-
/// 获得 样式集合
15-
/// </summary>
16-
/// <returns></returns>
17-
protected string? ClassString => CssBuilder.Default("badge")
13+
private string? ClassString => CssBuilder.Default("badge")
1814
.AddClass($"bg-{Color.ToDescriptionString()}", Color != Color.None)
1915
.AddClass("rounded-pill", IsPill)
2016
.AddClassFromAttributes(AdditionalAttributes)
2117
.Build();
2218

2319
/// <summary>
24-
/// 获得/设置 颜色
20+
/// Gets or sets the color of the badge. Default is <see cref="Color.Primary"/>.
2521
/// </summary>
26-
[Parameter] public Color Color { get; set; } = Color.Primary;
22+
[Parameter]
23+
public Color Color { get; set; } = Color.Primary;
2724

2825
/// <summary>
29-
/// 获得/设置 是否显示为胶囊形式
26+
/// Gets or sets whether the badge should be displayed as a pill (rounded) or not. Default is false.
3027
/// </summary>
3128
/// <value></value>
32-
[Parameter] public bool IsPill { get; set; }
29+
[Parameter]
30+
public bool IsPill { get; set; }
3331

3432
/// <summary>
35-
/// 子组件
33+
/// Gets or sets the child content of the component. Default is false.
3634
/// </summary>
37-
[Parameter] public RenderFragment? ChildContent { get; set; }
35+
[Parameter]
36+
public RenderFragment? ChildContent { get; set; }
3837
}

‎src/BootstrapBlazor/Components/Badge/ShieldBadge.razor‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@namespace BootstrapBlazor.Components
2+
@inherits BootstrapComponentBase
3+
4+
<div @attributes="@AdditionalAttributes" class="@ClassString" style="@StyleString">
5+
<div class="shield-badge-label">
6+
@if (!string.IsNullOrEmpty(Icon))
7+
{
8+
<i class="@IconString"></i>
9+
}
10+
@if (!string.IsNullOrEmpty(Label))
11+
{
12+
<span>@Label</span>
13+
}
14+
</div>
15+
<div class="shield-badge-text">
16+
@if (!string.IsNullOrEmpty(Text))
17+
{
18+
<span>@Text</span>
19+
}
20+
</div>
21+
</div>

‎src/BootstrapBlazor/Components/Badge/ShieldBadge.razor.cs‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
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+
/// ShieldBadge component
10+
/// </summary>
11+
public partial class ShieldBadge
12+
{
13+
/// <summary>
14+
/// Gets or sets the icon. Default is null.
15+
/// </summary>
16+
[Parameter]
17+
public string? Icon { get; set; }
18+
19+
/// <summary>
20+
/// Gets or sets the icon color. Default is null.
21+
/// </summary>
22+
[Parameter]
23+
public string? IconColor { get; set; }
24+
25+
/// <summary>
26+
/// Gets or sets the text of badge. Default is null.
27+
/// </summary>
28+
[Parameter]
29+
public string? Text { get; set; }
30+
31+
/// <summary>
32+
/// Gets or sets the text color. Default is null.
33+
/// </summary>
34+
[Parameter]
35+
public string? TextColor { get; set; }
36+
37+
/// <summary>
38+
/// Gets or sets the text background color. Default is null.
39+
/// </summary>
40+
[Parameter]
41+
public string? TextBackgroundColor { get; set; }
42+
43+
/// <summary>
44+
/// Gets or sets the label of badge. Default is null.
45+
/// </summary>
46+
[Parameter]
47+
public string? Label { get; set; }
48+
49+
/// <summary>
50+
/// Gets or sets the label color of badge. Default is null.
51+
/// </summary>
52+
[Parameter]
53+
public string? LabelColor { get; set; }
54+
55+
/// <summary>
56+
/// Gets or sets the label background color. Default is null.
57+
/// </summary>
58+
[Parameter]
59+
public string? LabelBackgroundColor { get; set; }
60+
61+
/// <summary>
62+
/// Gets or sets the badge radius. Default is 3.
63+
/// </summary>
64+
[Parameter]
65+
public int Radius { get; set; } = 3;
66+
67+
private string? ClassString => CssBuilder.Default("shield-badge")
68+
.AddClassFromAttributes(AdditionalAttributes)
69+
.Build();
70+
71+
private string? StyleString => CssBuilder.Default()
72+
.AddStyle("--bb-shield-badge-icon-color", IconColor, !string.IsNullOrEmpty(IconColor))
73+
.AddStyle("--bb-shield-badge-label-color", LabelColor, !string.IsNullOrEmpty(LabelColor))
74+
.AddStyle("--bb-shield-badge-label-bg", LabelBackgroundColor, !string.IsNullOrEmpty(LabelBackgroundColor))
75+
.AddStyle("--bb-shield-badge-text-color", TextColor, !string.IsNullOrEmpty(TextColor))
76+
.AddStyle("--bb-shield-badge-text-bg", TextBackgroundColor, !string.IsNullOrEmpty(TextBackgroundColor))
77+
.AddStyle("--bb-shield-badge-radius", $"{Math.Max(0, Radius)}px", Radius != 3)
78+
.Build();
79+
80+
private string? IconString => CssBuilder.Default("shield-badge-icon")
81+
.AddClass(Icon, !string.IsNullOrEmpty(Icon))
82+
.Build();
83+
}

0 commit comments

Comments
 (0)