diff --git a/src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css b/src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css index 7b075ce5e94..a77a7ad1da6 100644 --- a/src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css +++ b/src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css @@ -45,6 +45,7 @@ .card-footer-code ::deep .pre-code { margin: .5rem; + width: calc(100% - 1rem); } .card-footer-control { diff --git a/src/BootstrapBlazor.Server/Components/Samples/ShieldBadges.razor b/src/BootstrapBlazor.Server/Components/Samples/ShieldBadges.razor new file mode 100644 index 00000000000..87c66f39b60 --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Samples/ShieldBadges.razor @@ -0,0 +1,74 @@ +@page "/shield-badge" +@inject IStringLocalizer Localizer + +

@Localizer["Title"]

+

@Localizer["SubTitle"]

+ + +
+
+
+ + + + +
+
+ + + + +
+
+
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+
+ + diff --git a/src/BootstrapBlazor.Server/Components/Samples/ShieldBadges.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/ShieldBadges.razor.cs new file mode 100644 index 00000000000..18f1047e9a8 --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Samples/ShieldBadges.razor.cs @@ -0,0 +1,25 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the Apache 2.0 License +// See the LICENSE file in the project root for more information. +// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone + +namespace BootstrapBlazor.Server.Components.Samples; + +/// +/// ShieldBadge component sample +/// +public partial class ShieldBadges +{ + private string? _icon = "fa-brands fa-github"; + private string? _iconColor; + + private string? _label = "download"; + private string? _labelColor; + private string? _labelBackgroundColor; + + private string? _text = "12M"; + private string? _textColor; + private string? _textBackgroundColor; + + private int _radius = 3; +} diff --git a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs index 2aa8b65d605..5387273ff4b 100644 --- a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs +++ b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs @@ -525,6 +525,11 @@ void AddData(DemoMenuItem item) Url = "badge" }, new() + { + Text = Localizer["ShieldBadge"], + Url = "shield-badge" + }, + new() { Text = Localizer["BarcodeReader"], Url = "barcode-reader" diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index e5a49384fea..977aea12c61 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -3666,6 +3666,12 @@ "IsPill": "Capsule style", "ButtonSpan": "The primary button" }, + "BootstrapBlazor.Server.Components.Samples.ShieldBadges": { + "Title": "ShieldBadge", + "SubTitle": "Badge component with icon label text like Shields Badge", + "ShieldBadgeNormalTitle": "Basic usage", + "ShieldBadgeNormalIntro": "Use Icon to set the icon, Label to set the left text, and Text to set the right text" + }, "BootstrapBlazor.Server.Components.Samples.BarcodeReaders": { "Title": "BarcodeReader", "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 @@ "OctIcon": "Oct Icons", "UniverIcon": "Univer Icons", "Typed": "Typed", - "UniverSheet": "UniverSheet" + "UniverSheet": "UniverSheet", + "ShieldBadge": "ShieldBadge" }, "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": { "TablesHeaderTitle": "Header grouping function", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index b686cf3211b..71c8a1d4e93 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -3666,6 +3666,12 @@ "IsPill": "胶囊样式", "ButtonSpan": "主要按钮" }, + "BootstrapBlazor.Server.Components.Samples.ShieldBadges": { + "Title": "ShieldBadge 徽章组件", + "SubTitle": "带图标标签文本的徽章组件高仿 Shields Badge", + "ShieldBadgeNormalTitle": "基础用法", + "ShieldBadgeNormalIntro": "通过 Icon 设置图标，通过 Label 设置左侧文本，通过 Text 设置右侧文本" + }, "BootstrapBlazor.Server.Components.Samples.BarcodeReaders": { "Title": "BarcodeReader 条码扫描", "SubTitle": "本组件通过调用摄像头对条码进行扫描，获取到条码内容条码/QR码", @@ -4909,7 +4915,8 @@ "OctIcon": "Oct Icons", "UniverIcon": "Univer Icons", "Typed": "打字机效果 Typed", - "UniverSheet": "表格组件 UniverSheet" + "UniverSheet": "表格组件 UniverSheet", + "ShieldBadge": "徽章组件 ShieldBadge" }, "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": { "TablesHeaderTitle": "表头分组功能", diff --git a/src/BootstrapBlazor.Server/docs.json b/src/BootstrapBlazor.Server/docs.json index 2eb67ad658b..b03c77004ae 100644 --- a/src/BootstrapBlazor.Server/docs.json +++ b/src/BootstrapBlazor.Server/docs.json @@ -227,7 +227,8 @@ "affix": "Affixs", "watermark": "Watermarks", "typed": "Typeds", - "univer-sheet": "UniverSheets" + "univer-sheet": "UniverSheets", + "shield-badge": "ShieldBadges" }, "video": { "table": "BV1ap4y1x7Qn?p=1", diff --git a/src/BootstrapBlazor/Components/Badge/Badge.razor.cs b/src/BootstrapBlazor/Components/Badge/Badge.razor.cs index 931a83305a1..606a5ddda79 100644 --- a/src/BootstrapBlazor/Components/Badge/Badge.razor.cs +++ b/src/BootstrapBlazor/Components/Badge/Badge.razor.cs @@ -6,33 +6,32 @@ namespace BootstrapBlazor.Components; /// -/// Badge 徽章组件 +/// Badge component /// public partial class Badge { - /// - /// 获得 样式集合 - /// - /// - protected string? ClassString => CssBuilder.Default("badge") + private string? ClassString => CssBuilder.Default("badge") .AddClass($"bg-{Color.ToDescriptionString()}", Color != Color.None) .AddClass("rounded-pill", IsPill) .AddClassFromAttributes(AdditionalAttributes) .Build(); /// - /// 获得/设置 颜色 + /// Gets or sets the color of the badge. Default is . /// - [Parameter] public Color Color { get; set; } = Color.Primary; + [Parameter] + public Color Color { get; set; } = Color.Primary; /// - /// 获得/设置 是否显示为胶囊形式 + /// Gets or sets whether the badge should be displayed as a pill (rounded) or not. Default is false. /// /// - [Parameter] public bool IsPill { get; set; } + [Parameter] + public bool IsPill { get; set; } /// - /// 子组件 + /// Gets or sets the child content of the component. Default is false. /// - [Parameter] public RenderFragment? ChildContent { get; set; } + [Parameter] + public RenderFragment? ChildContent { get; set; } } diff --git a/src/BootstrapBlazor/Components/Badge/ShieldBadge.razor b/src/BootstrapBlazor/Components/Badge/ShieldBadge.razor new file mode 100644 index 00000000000..0461ced272d --- /dev/null +++ b/src/BootstrapBlazor/Components/Badge/ShieldBadge.razor @@ -0,0 +1,21 @@ +@namespace BootstrapBlazor.Components +@inherits BootstrapComponentBase + +
+
+ @if (!string.IsNullOrEmpty(Icon)) + { + + } + @if (!string.IsNullOrEmpty(Label)) + { + @Label + } +
+
+ @if (!string.IsNullOrEmpty(Text)) + { + @Text + } +
+
diff --git a/src/BootstrapBlazor/Components/Badge/ShieldBadge.razor.cs b/src/BootstrapBlazor/Components/Badge/ShieldBadge.razor.cs new file mode 100644 index 00000000000..c1cc6ebe4f3 --- /dev/null +++ b/src/BootstrapBlazor/Components/Badge/ShieldBadge.razor.cs @@ -0,0 +1,83 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the Apache 2.0 License +// See the LICENSE file in the project root for more information. +// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone + +namespace BootstrapBlazor.Components; + +/// +/// ShieldBadge component +/// +public partial class ShieldBadge +{ + /// + /// Gets or sets the icon. Default is null. + /// + [Parameter] + public string? Icon { get; set; } + + /// + /// Gets or sets the icon color. Default is null. + /// + [Parameter] + public string? IconColor { get; set; } + + /// + /// Gets or sets the text of badge. Default is null. + /// + [Parameter] + public string? Text { get; set; } + + /// + /// Gets or sets the text color. Default is null. + /// + [Parameter] + public string? TextColor { get; set; } + + /// + /// Gets or sets the text background color. Default is null. + /// + [Parameter] + public string? TextBackgroundColor { get; set; } + + /// + /// Gets or sets the label of badge. Default is null. + /// + [Parameter] + public string? Label { get; set; } + + /// + /// Gets or sets the label color of badge. Default is null. + /// + [Parameter] + public string? LabelColor { get; set; } + + /// + /// Gets or sets the label background color. Default is null. + /// + [Parameter] + public string? LabelBackgroundColor { get; set; } + + /// + /// Gets or sets the badge radius. Default is 3. + /// + [Parameter] + public int Radius { get; set; } = 3; + + private string? ClassString => CssBuilder.Default("shield-badge") + .AddClassFromAttributes(AdditionalAttributes) + .Build(); + + private string? StyleString => CssBuilder.Default() + .AddStyle("--bb-shield-badge-icon-color", IconColor, !string.IsNullOrEmpty(IconColor)) + .AddStyle("--bb-shield-badge-label-color", LabelColor, !string.IsNullOrEmpty(LabelColor)) + .AddStyle("--bb-shield-badge-label-bg", LabelBackgroundColor, !string.IsNullOrEmpty(LabelBackgroundColor)) + .AddStyle("--bb-shield-badge-text-color", TextColor, !string.IsNullOrEmpty(TextColor)) + .AddStyle("--bb-shield-badge-text-bg", TextBackgroundColor, !string.IsNullOrEmpty(TextBackgroundColor)) + .AddStyle("--bb-shield-badge-radius", $"{Math.Max(0, Radius)}px", Radius != 3) + .Build(); + + private string? IconString => CssBuilder.Default("shield-badge-icon") + .AddClass(Icon, !string.IsNullOrEmpty(Icon)) + .Build(); +} diff --git a/src/BootstrapBlazor/Components/Badge/ShieldBadge.razor.scss b/src/BootstrapBlazor/Components/Badge/ShieldBadge.razor.scss new file mode 100644 index 00000000000..b78b0a63326 --- /dev/null +++ b/src/BootstrapBlazor/Components/Badge/ShieldBadge.razor.scss @@ -0,0 +1,35 @@ +.shield-badge { + --bb-shield-badge-icon-color: #fff; + --bb-shield-badge-label-color: #fff; + --bb-shield-badge-label-bg: #5e5e5e; + --bb-shield-badge-text-color: #fff; + --bb-shield-badge-text-bg: #0f81c2; + --bb-shield-badge-radius: 3px; + --bb-shield-badge-font-size: 12px; + --bb-shield-badge-padding: 1px 6px; + display: inline-flex; + flex-wrap: nowrap; + font-size: var(--bb-shield-badge-font-size); + + .shield-badge-label { + background-color: var(--bb-shield-badge-label-bg); + color: var(--bb-shield-badge-label-color); + padding: var(--bb-shield-badge-padding); + border-top-left-radius: var(--bb-shield-badge-radius); + border-bottom-left-radius: var(--bb-shield-badge-radius); + + .shield-badge-icon { + color: var(--bb-shield-badge-icon-color); + margin-inline-end: 4px; + font-size: 95%; + } + } + + .shield-badge-text { + background-color: var(--bb-shield-badge-text-bg); + color: var(--bb-shield-badge-text-color); + padding: var(--bb-shield-badge-padding); + border-top-right-radius: var(--bb-shield-badge-radius); + border-bottom-right-radius: var(--bb-shield-badge-radius); + } +} diff --git a/src/BootstrapBlazor/wwwroot/scss/components.scss b/src/BootstrapBlazor/wwwroot/scss/components.scss index 6da3b716f25..345bcd9221a 100644 --- a/src/BootstrapBlazor/wwwroot/scss/components.scss +++ b/src/BootstrapBlazor/wwwroot/scss/components.scss @@ -1,4 +1,4 @@ -@import "bootstrapblazor-dark.scss"; +@import "bootstrapblazor-dark.scss"; @import "root.scss"; @import "../../Components/Affix/Affix.razor.scss"; @@ -8,6 +8,7 @@ @import "../../Components/AutoFill/AutoFill.razor.scss"; @import "../../Components/Avatar/Avatar.razor.scss"; @import "../../Components/Badge/Badge.razor.scss"; +@import "../../Components/Badge/ShieldBadge.razor.scss"; @import "../../Components/Button/Button.razor.scss"; @import "../../Components/Button/DialButton.razor.scss"; @import "../../Components/Button/PopConfirmButtonContent.razor.scss"; diff --git a/test/UnitTest/Components/ShieldBadgeTest.cs b/test/UnitTest/Components/ShieldBadgeTest.cs new file mode 100644 index 00000000000..ebad31f1a79 --- /dev/null +++ b/test/UnitTest/Components/ShieldBadgeTest.cs @@ -0,0 +1,46 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the Apache 2.0 License +// See the LICENSE file in the project root for more information. +// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone + +namespace UnitTest.Components; + +public class ShieldBadgeTest : BootstrapBlazorTestBase +{ + [Fact] + public void ShieldBadge_Ok() + { + var cut = Context.RenderComponent(); + cut.Contains("shield-badge"); + cut.Contains("shield-badge-label"); + cut.Contains("shield-badge-text"); + cut.DoesNotContain("shield-badge-icon"); + + cut.SetParametersAndRender(p => p.Add(i => i.Icon, "fa fa-user")); + cut.Contains("shield-badge-icon"); + + cut.SetParametersAndRender(p => p.Add(i => i.Label, "test-label")); + cut.Contains("test-label"); + + cut.SetParametersAndRender(p => p.Add(i => i.Text, "test-text")); + cut.Contains("test-text"); + + cut.SetParametersAndRender(p => p.Add(i => i.IconColor, "#123")); + cut.Contains("--bb-shield-badge-icon-color: #123;"); + + cut.SetParametersAndRender(p => p.Add(i => i.LabelColor, "#123")); + cut.Contains("--bb-shield-badge-label-color: #123;"); + + cut.SetParametersAndRender(p => p.Add(i => i.LabelBackgroundColor, "#123")); + cut.Contains("--bb-shield-badge-label-bg: #123;"); + + cut.SetParametersAndRender(p => p.Add(i => i.TextColor, "#123")); + cut.Contains("--bb-shield-badge-text-color: #123;"); + + cut.SetParametersAndRender(p => p.Add(i => i.TextBackgroundColor, "#123")); + cut.Contains("--bb-shield-badge-text-bg: #123;"); + + cut.SetParametersAndRender(p => p.Add(i => i.Radius, 4)); + cut.Contains("--bb-shield-badge-radius: 4px;"); + } +}