!3544 fix(#I61W8R): update style for card header tmeplate

* chore: bump version 7.0.4-beta02
* Merge branch 'main' into dev-card
* doc: 更新 HeaderTemplate 示例
* chore: 更新资源文件
* chore: 更新样式移除 bottom 间隙
* card问题复现

src/BootstrapBlazor.Shared/Locales/en.json

@@ -3372,9 +3372,11 @@
     "ColorIntro": "By setting, <code>The</code> makes the border and Body color appropriate",
     "CollapsibleTitle": "Collapsible",
     "CollapsibleIntro": "Card body can collapse/expand by set <code>IsCollapsible</code> to true",
-    "CollapsibleIntro2": "Set <code>Collapsed</code> value to <code>true</code> for default collapsed card body.",
+    "CollapsibleIntroDesc": "Set <code>Collapsed</code> value to <code>true</code> for default collapsed card body.",
     "CollapsibleBody": "Click card hader for collapse/expand card body",
     "CollapsibleHeaderTemplate": "Header Template",
+    "CollapsibleHeaderTemplateTitle": "Header Template",
+    "CollapsibleHeaderTemplateIntro": "Setting <code>HeaderTemplate</code> for custom <code>CardHeader</code>",
     "ShadowTitle": "Shadow effect",
     "ShadowIntro": "Enable shadow effect by set <code>IsShadow</code> to true",
     "ShadowBody": "Shadow effect sample",

src/BootstrapBlazor.Shared/Locales/zh.json

@@ -3382,9 +3382,11 @@
     "ColorIntro": "通过设置，<code>Color</code> 使border和Body具有相应的颜色",
     "CollapsibleTitle": "可以收缩展开的卡片",
     "CollapsibleIntro": "通过设置 <code>IsCollapsible</code> 使 <code>Body</code> 可以伸缩",
-    "CollapsibleIntro2": "通过设置 <code>Collapsed</code> 使 <code>Body</code> 默认收缩 参数默认值 <code>false</code> 展开",
+    "CollapsibleIntroDesc": "通过设置 <code>Collapsed</code> 使 <code>Body</code> 默认收缩 参数默认值 <code>false</code> 展开",
     "CollapsibleBody": "点击 Header 收缩/展开",
     "CollapsibleHeaderTemplate": "这里是模板",
+    "CollapsibleHeaderTemplateTitle": "Header 模板",
+    "CollapsibleHeaderTemplateIntro": "通过设置 <code>HeaderTemplate</code> 自定义 <code>CardHeader</code> 内容",
     "ShadowTitle": "带有阴影的卡片",
     "ShadowIntro": "通过设置 <code>IsShadow</code> 开启阴影特效",
     "ShadowBody": "阴影特效示例",

src/BootstrapBlazor.Shared/Samples/Cards.razor

@@ -130,7 +130,7 @@
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["CollapsibleTitle"]" Introduction="@Localizer["CollapsibleIntro"]" Name="Collapsible">
-    <p>@((MarkupString)Localizer["CollapsibleIntro2"].Value)</p>
+    <p>@((MarkupString)Localizer["CollapsibleIntroDesc"].Value)</p>
     <Card IsCollapsible="true" HeaderText="@Localizer["CollapsibleTitle"]">
         <BodyTemplate>
             @Localizer["CollapsibleBody"]
@@ -139,7 +139,7 @@
     <Card IsCollapsible="true" HeaderText="@Localizer["CollapsibleTitle"]" class="mt-3">
         <HeaderTemplate>
             @Localizer["CollapsibleHeaderTemplate"]
-            <Select TValue="string">
+            <Select TValue="string" class="ms-1">
                 <Options>
                     <SelectOption Text="Test1" Value="" />
                     <SelectOption Text="Test2" Value="1" />
@@ -159,6 +159,25 @@
     </Card>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["CollapsibleHeaderTemplateTitle"]" Introduction="@Localizer["CollapsibleHeaderTemplateIntro"]" Name="HeaderTemplate">
+    <Card HeaderText="@Localizer["CollapsibleTitle"]" class="mt-3">
+        <HeaderTemplate>
+            @Localizer["CollapsibleHeaderTemplate"]
+            <Select TValue="string" class="ms-1">
+                <Options>
+                    <SelectOption Text="Test1" Value="" />
+                    <SelectOption Text="Test2" Value="1" />
+                    <SelectOption Text="Test3" Value="2" />
+                    <SelectOption Text="Test4" Value="3" />
+                </Options>
+            </Select>
+        </HeaderTemplate>
+        <BodyTemplate>
+            @Localizer["CollapsibleHeaderTemplateTitle"]
+        </BodyTemplate>
+    </Card>
+</DemoBlock>
+
 <DemoBlock Title="@Localizer["ShadowTitle"]" Introduction="@Localizer["ShadowIntro"]" Name="Shadow">
     <Card IsShadow="true" HeaderText="@Localizer["ShadowTitle"]">
         <BodyTemplate>
@@ -167,4 +186,41 @@
     </Card>
 </DemoBlock>
 
+<DemoBlock Title="对比设置" Name="compare">
+    <Card IsCollapsible="false" HeaderText="@Localizer["CollapsibleTitle"]" class="mt-3">
+        <HeaderTemplate>
+            @Localizer["CollapsibleHeaderTemplate"]
+            <Select TValue="string">
+                <Options>
+                    <SelectOption Text="Test1" Value="" />
+                    <SelectOption Text="Test2" Value="1" />
+                    <SelectOption Text="Test3" Value="2" />
+                    <SelectOption Text="Test4" Value="3" />
+                </Options>
+            </Select>
+        </HeaderTemplate>
+        <BodyTemplate>
+            @Localizer["CollapsibleBody"]
+        </BodyTemplate>
+    </Card>
+
+    <Card IsCollapsible="true" HeaderText="@Localizer["CollapsibleTitle"]" class="mt-3">
+        <HeaderTemplate>
+            @Localizer["CollapsibleHeaderTemplate"]
+            <Select TValue="string">
+                <Options>
+                    <SelectOption Text="Test1" Value="" />
+                    <SelectOption Text="Test2" Value="1" />
+                    <SelectOption Text="Test3" Value="2" />
+                    <SelectOption Text="Test4" Value="3" />
+                </Options>
+            </Select>
+        </HeaderTemplate>
+        <BodyTemplate>
+            @Localizer["CollapsibleBody"]
+        </BodyTemplate>
+    </Card>
+
+</DemoBlock>
+
 <AttributeTable Items="GetAttributes()" />

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>7.0.4-beta01</Version>
+    <Version>7.0.4-beta02</Version>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

src/BootstrapBlazor/Components/Card/Card.css

@@ -32,6 +32,11 @@
         border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
     }
 
+    .card-header .card-title {
+        --bs-card-title-spacer-y: 0;
+        flex: 1;
+    }
+
 .card-shadow {
     box-shadow: var(--bb-card-shadow);
     transition: box-shadow .3s linear;