feat(Card): add HeaderPaddingY parameter (#6106)

* feat: 增加 HeaderPaddingY 参数调整 header y 轴间隙

* refactor: 代码格式化

* doc: 增加文档

* test: 增加单元测试

* test: 更新单元测试

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/Cards.razor.cs

@@ -49,6 +49,14 @@ private AttributeItem[] GetAttributes() =>
             DefaultValue = " — "
         },
         new()
+        {
+            Name = nameof(Card.HeaderPaddingY),
+            Description = Localizer["HeaderPaddingY"],
+            Type = "string?",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
         {
             Name = "Color",
             Description = Localizer["Color"],

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

@@ -3803,7 +3803,8 @@
     "CollapsibleTitle": "Collapsible",
     "CollapsibleHeaderTemplate": "Header Template",
     "CollapsibleBody": "Click card hader for collapse/expand card body",
-    "ShadowBody": "Shadow effect sample"
+    "ShadowBody": "Shadow effect sample",
+    "HeaderPaddingY": "Header top and bottom padding"
   },
   "BootstrapBlazor.Server.Components.Samples.Calendars": {
     "Title": "Calendar",

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

@@ -3803,7 +3803,8 @@
     "CollapsibleTitle": "可以收缩展开的卡片",
     "CollapsibleBody": "点击 Header 收缩/展开",
     "CollapsibleHeaderTemplate": "这里是模板",
-    "ShadowBody": "阴影特效示例"
+    "ShadowBody": "阴影特效示例",
+    "HeaderPaddingY": "Header 上下内边距"
   },
   "BootstrapBlazor.Server.Components.Samples.Calendars": {
     "Title": "Calendar 日历框",

src/BootstrapBlazor/Components/Card/Card.razor

@@ -2,7 +2,7 @@
 @inherits BootstrapModuleComponentBase
 @attribute [BootstrapModuleAutoLoader(JSObjectReference = true)]
 
-<div @attributes="@AdditionalAttributes" class="@ClassString" id="@Id">
+<div @attributes="@AdditionalAttributes" id="@Id" class="@ClassString" style="@HeaderStyleString">
     @if (HeaderTemplate != null || !string.IsNullOrEmpty(HeaderText))
     {
         <div class="card-header">
@@ -33,7 +33,7 @@
             }
         </div>
     }
-    <div class="@BodyClassName" id="@BodyId">
+    <div id="@BodyId" class="@BodyClassName">
         @if (IsCollapsible)
         {
             <div class="card-body-wrapper">

src/BootstrapBlazor/Components/Card/Card.razor.cs

@@ -49,6 +49,13 @@ public partial class Card
         .AddClass("text-muted", IsCenter)
         .Build();
 
+    /// <summary>
+    /// 获得/设置 Card Header 高度 padding Y轴值 默认 null
+    /// <para>单位需自行给定 如 0.25rem</para>
+    /// </summary>
+    [Parameter]
+    public string? HeaderPaddingY { get; set; }
+
     /// <summary>
     /// 获得/设置 收缩展开箭头图标 默认 fa-solid fa-circle-chevron-right
     /// </summary>
@@ -119,6 +126,10 @@ public partial class Card
     [NotNull]
     private IIconTheme? IconTheme { get; set; }
 
+    private string? HeaderStyleString => CssBuilder.Default()
+        .AddStyle("--bs-card-cap-padding-y", HeaderPaddingY)
+        .Build();
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>

test/UnitTest/Components/CardTest.cs

@@ -14,6 +14,12 @@ public void Header_Ok()
     {
         var cut = Context.RenderComponent<Card>(builder => builder.Add(a => a.HeaderTemplate, CreateComponent()));
         Assert.Contains(Content, cut.Markup);
+
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.HeaderPaddingY, "0.25rem");
+        });
+        cut.Contains("--bs-card-cap-padding-y: 0.25rem;");
     }
 
     [Fact]

test/UnitTest/Components/DisplayTest.cs

@@ -214,7 +214,7 @@ public void Bind_Ok()
                 });
             });
         });
-        Assert.Contains("<div class=\"input-group\"><div class=\"form-control is-display\">test-name</div><div class=\"input-group-text\"><span>姓名</span></div><div class=\"input-group-text\"><span></span></div></div>", cut.Markup);
+        Assert.Contains("<div class=\"input-group\"><div class=\"form-control is-display\">test-name</div><div class=\"input-group-text\">姓名</div><div class=\"input-group-text\"></div></div>", cut.Markup);
     }
 
     [Fact]

test/UnitTest/Components/InputTest.cs

@@ -321,7 +321,7 @@ public void InputGroup_Width()
             }));
         });
 
-        cut.MarkupMatches("<div class=\"input-group\"><div class=\"input-group-text\" required=\"true\" style=\"--bb-input-group-label-width: 120px;\"><span>BootstrapInputGroup</span></div></div>");
+        cut.MarkupMatches("<div class=\"input-group\"><div class=\"input-group-text\" style=\"--bb-input-group-label-width: 120px;\" required=\"true\">BootstrapInputGroup</div></div>");
     }
 
     [Fact]