feat(ShieldBadge): add ShieldBadge component

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 {

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

@@ -0,0 +1,74 @@
+@page "/shield-badge"
+@inject IStringLocalizer<ShieldBadges> Localizer
+
+<h3>@Localizer["Title"]</h3>
+<h4>@Localizer["SubTitle"]</h4>
+
+<DemoBlock Title="@Localizer["ShieldBadgeNormalTitle"]"
+           Introduction="@Localizer["ShieldBadgeNormalIntro"]"
+           Name="Normal">
+    <section ignore>
+        <div class="row form-inline g-3">
+            <div class="col-12 col-sm-4">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="Icon" Width="106"></BootstrapInputGroupLabel>
+                    <BootstrapInput @bind-Value="@_icon"></BootstrapInput>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12 col-sm-4">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="IconColor" Width="106"></BootstrapInputGroupLabel>
+                    <ColorPicker @bind-Value="@_iconColor"></ColorPicker>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12 col-sm-4">
+            </div>
+            <div class="col-12 col-sm-4">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="Label" Width="106"></BootstrapInputGroupLabel>
+                    <BootstrapInput @bind-Value="@_label"></BootstrapInput>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12 col-sm-4">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="LabelColor" Width="106"></BootstrapInputGroupLabel>
+                    <ColorPicker @bind-Value="@_labelColor"></ColorPicker>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12 col-sm-4">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="LabelBgColor" Width="106"></BootstrapInputGroupLabel>
+                    <ColorPicker @bind-Value="@_labelBackgroundColor"></ColorPicker>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12 col-sm-4">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="Text" Width="106"></BootstrapInputGroupLabel>
+                    <BootstrapInput @bind-Value="@_text"></BootstrapInput>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12 col-sm-4">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="TextColor" Width="106"></BootstrapInputGroupLabel>
+                    <ColorPicker @bind-Value="@_textColor"></ColorPicker>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12 col-sm-4">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="TextBgColor" Width="106"></BootstrapInputGroupLabel>
+                    <ColorPicker @bind-Value="@_textBackgroundColor"></ColorPicker>
+                </BootstrapInputGroup>
+            </div>
+            <div class="col-12 col-sm-4">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="Radius" Width="106"></BootstrapInputGroupLabel>
+                    <Slider @bind-Value="@_radius" Min="0" Max="10" Step="1"></Slider>
+                </BootstrapInputGroup>
+            </div>
+        </div>
+    </section>
+    <ShieldBadge Icon="@_icon" IconColor="@_iconColor"
+                 Label="download" LabelColor="@_labelColor" LabelBackgroundColor="@_labelBackgroundColor"
+                 Text="12M" TextColor="@_textColor" TextBackgroundColor="@_textBackgroundColor"
+                 Radius="@_radius"></ShieldBadge>
+</DemoBlock>

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;
+
+/// <summary>
+/// ShieldBadge component sample
+/// </summary>
+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;
+}

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"

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 <code>Icon</code> to set the icon, <code>Label</code> to set the left text, and <code>Text</code> 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",

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": "通过 <code>Icon</code> 设置图标，通过 <code>Label</code> 设置左侧文本，通过 <code>Text</code> 设置右侧文本"
+  },
   "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": "表头分组功能",

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",

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

@@ -6,33 +6,32 @@
 namespace BootstrapBlazor.Components;
 
 /// <summary>
-/// Badge 徽章组件
+/// Badge component
 /// </summary>
 public partial class Badge
 {
-    /// <summary>
-    /// 获得 样式集合
-    /// </summary>
-    /// <returns></returns>
-    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();
 
     /// <summary>
-    /// 获得/设置 颜色
+    /// Gets or sets the color of the badge. Default is <see cref="Color.Primary"/>.
     /// </summary>
-    [Parameter] public Color Color { get; set; } = Color.Primary;
+    [Parameter]
+    public Color Color { get; set; } = Color.Primary;
 
     /// <summary>
-    /// 获得/设置 是否显示为胶囊形式
+    /// Gets or sets whether the badge should be displayed as a pill (rounded) or not. Default is false.
     /// </summary>
     /// <value></value>
-    [Parameter] public bool IsPill { get; set; }
+    [Parameter]
+    public bool IsPill { get; set; }
 
     /// <summary>
-    /// 子组件
+    /// Gets or sets the child content of the component. Default is false.
     /// </summary>
-    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
 }

src/BootstrapBlazor/Components/Badge/ShieldBadge.razor

@@ -0,0 +1,21 @@
+@namespace BootstrapBlazor.Components
+@inherits BootstrapComponentBase
+
+<div @attributes="@AdditionalAttributes" class="@ClassString" style="@StyleString">
+    <div class="shield-badge-label">
+        @if (!string.IsNullOrEmpty(Icon))
+        {
+            <i class="@IconString"></i>
+        }
+        @if (!string.IsNullOrEmpty(Label))
+        {
+            <span>@Label</span>
+        }
+    </div>
+    <div class="shield-badge-text">
+        @if (!string.IsNullOrEmpty(Text))
+        {
+            <span>@Text</span>
+        }
+    </div>
+</div>

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;
+
+/// <summary>
+/// ShieldBadge component
+/// </summary>
+public partial class ShieldBadge
+{
+    /// <summary>
+    /// Gets or sets the icon. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? Icon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon color. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? IconColor { get; set; }
+
+    /// <summary>
+    /// Gets or sets the text of badge. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? Text { get; set; }
+
+    /// <summary>
+    /// Gets or sets the text color. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? TextColor { get; set; }
+
+    /// <summary>
+    /// Gets or sets the text background color. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? TextBackgroundColor { get; set; }
+
+    /// <summary>
+    /// Gets or sets the label of badge. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? Label { get; set; }
+
+    /// <summary>
+    /// Gets or sets the label color of badge. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? LabelColor { get; set; }
+
+    /// <summary>
+    /// Gets or sets the label background color. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? LabelBackgroundColor { get; set; }
+
+    /// <summary>
+    /// Gets or sets the badge radius. Default is 3.
+    /// </summary>
+    [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();
+}

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);
+    }
+}

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";