dotnetcore · ArgoZhang · Nov 30, 2024 · Nov 30, 2024 · Nov 30, 2024 · Nov 30, 2024
diff --git a/src/BootstrapBlazor.Server/Components/App.razor b/src/BootstrapBlazor.Server/Components/App.razor
@@ -1,5 +1,5 @@
 @inject IWebHostEnvironment Env
-@inject IStringLocalizer<App> Localizer
+@inject IStringLocalizer<BaseLayout> Localizer
 
 <!DOCTYPE html>
 <html lang="en" data-bs-theme='light'>
@@ -12,7 +12,7 @@
     <meta name="keywords" content="bootstrap,blazor,wasm,webassembly,UI,netcore,web,assembly">
     <meta name="description" content="基于 Bootstrap 风格的 Blazor UI 组件库，用于研发企业级中后台产品。">
     <meta name="author" content="argo (argo@live.ca)">
-    <title>@Localizer["Title"]</title>
+    <title>@Localizer["SiteTitle"]</title>
     <base href="/" />
     <link rel="icon" href="favicon.ico" type="image/x-icon">
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

diff --git a/src/BootstrapBlazor.Server/Extensions/StaticFileResponseContextExtensions.cs b/src/BootstrapBlazor.Server/Extensions/StaticFileResponseContextExtensions.cs
@@ -53,12 +53,10 @@ public static RenderFragment RenderAssets(this ComponentBase component) => build
 
     private static void RenderCss(this RenderTreeBuilder builder, string url)
     {
-#if NET9_0_OR_GREATER
         builder.OpenElement(0, "link");
         builder.AddAttribute(1, "rel", "stylesheet");
         builder.AddAttribute(2, "href", url);
         builder.CloseElement();
-#endif
     }
 
     public static void ProcessCache(this StaticFileResponseContext context, IConfiguration configuration)

diff --git a/src/BootstrapBlazor.Shared/Components/Samples/Collapses.razor b/src/BootstrapBlazor.Shared/Components/Samples/Collapses.razor
@@ -118,7 +118,7 @@
             }
         </CollapseItems>
     </Collapse>
-    <Button Text="@Localizer["ButtonText"]" OnClick="OnToggle" class="mt-3" />
+    <Button Text="@Localizer["ButtonText"]" OnClick="OnToggle" class="mt-3"></Button>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["IconTitle"]" Introduction="@Localizer["IconIntro"]" Name="Icon">
@@ -140,4 +140,43 @@
     </Collapse>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["HeaderTemplateTitle"]" Introduction="@Localizer["HeaderTemplateIntro"]" Name="HeaderTemplate">
+    <Collapse>
+        <CollapseItems>
+            <CollapseItem Text="@Localizer["Consistency"]">
+                <HeaderTemplate>
+                    <div class="p-2">
+                        <Select Items="Items" @bind-Value="Value" IsPopover="true"></Select>
+                    </div>
+                </HeaderTemplate>
+                <ChildContent>
+                    <div>@Localizer["ConsistencyItem1"]</div>
+                    <div>@Localizer["ConsistencyItem2"]</div>
+                    <div>@Value</div>
+                </ChildContent>
+            </CollapseItem>
+            <CollapseItem Text="@Localizer["Feedback"]">
+                <HeaderTemplate>
+                    <div class="p-2">Header-Test</div>
+                </HeaderTemplate>
+                <ChildContent>
+                    <div>@Localizer["FeedbackItem1"]</div>
+                    <div>@Localizer["FeedbackItem2"]</div>
+                </ChildContent>
+            </CollapseItem>
+            <CollapseItem Text="@Localizer["Controllability"]">
+                <HeaderTemplate>
+                    <div class="p-2">Header-Test</div>
+                </HeaderTemplate>
+                <ChildContent>
+                    <div>@Localizer["ControllabilityItem1"]</div>
+                    <div>@Localizer["ControllabilityItem2"]</div>
+                </ChildContent>
+            </CollapseItem>
+        </CollapseItems>
+    </Collapse>
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()" />
+
+<AttributeTable Items="@GetCollapseItemAttributes()" Title="@nameof(CollapseItem)" />
diff --git a/src/BootstrapBlazor.Shared/Components/Samples/Collapses.razor.cs b/src/BootstrapBlazor.Shared/Components/Samples/Collapses.razor.cs
@@ -26,10 +26,14 @@ private void OnToggle()
         State = !State;
     }
 
-    /// <summary>
-    /// 获得属性方法
-    /// </summary>
-    /// <returns></returns>
+    private string Value { get; set; }
+
+    private IEnumerable<SelectedItem> Items { get; set; } = new[]
+    {
+        new SelectedItem ("Beijing", "北京"),
+        new SelectedItem ("Shanghai", "上海") { Active = true },
+    };
+
     private AttributeItem[] GetAttributes() =>
     [
         new()
@@ -57,4 +61,64 @@ private AttributeItem[] GetAttributes() =>
             DefaultValue = " — "
         }
     ];
+
+    private AttributeItem[] GetCollapseItemAttributes() =>
+    [
+        new()
+        {
+            Name = "Text",
+            Description = Localizer["CollapseItemAttributeText"],
+            Type = "RenderFragment",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = "Icon",
+            Description = Localizer["CollapseItemAttributeIcon"],
+            Type = "Func<CollapseItem, Task>",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = "TitleColor",
+            Description = Localizer["CollapseItemAttributeTitleColor"],
+            Type = "Func<CollapseItem, Task>",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = "Class",
+            Description = Localizer["CollapseItemAttributeClass"],
+            Type = "Func<CollapseItem, Task>",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = "HeaderClass",
+            Description = Localizer["CollapseItemAttributeHeaderClass"],
+            Type = "Func<CollapseItem, Task>",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = "HeaderTemplate",
+            Description = Localizer["CollapseItemAttributeHeaderTemplate"],
+            Type = "Func<CollapseItem, Task>",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = "IsCollapsed",
+            Description = Localizer["CollapseItemAttributeIsCollapsed"],
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        }
+    ];
 }
diff --git a/src/BootstrapBlazor.Shared/Locales/en-US.json b/src/BootstrapBlazor.Shared/Locales/en-US.json
@@ -3859,7 +3859,16 @@
     "Controllability": "Controllability",
     "ControllabilityItem1": "User decision-making: according to the scene can give the user action advice or security tips, but can not replace the user to make decisions;",
     "ControllabilityItem2": "Results controllable: Users are free to perform actions, including undoing, falling back, and terminating the current operation.",
-    "ButtonText": "Toggle"
+    "ButtonText": "Toggle",
+    "HeaderTemplateTitle": "Header Template",
+    "HeaderTemplateIntro": "Customize the <b>Header</b> display content by setting <code>HeaderTemplate</code>",
+    "CollapseItemAttributeText": "The title of header",
+    "CollapseItemAttributeIcon": "The icon of header",
+    "CollapseItemAttributeTitleColor": "The color of header",
+    "CollapseItemAttributeClass": "The class of item",
+    "CollapseItemAttributeHeaderClass": "The class of header",
+    "CollapseItemAttributeHeaderTemplate": "Header template",
+    "CollapseItemAttributeIsCollapsed": "The item status collapsed"
   },
   "BootstrapBlazor.Shared.Components.Samples.DateTimeRanges": {
     "Title": "Date Time Range Picker",

diff --git a/src/BootstrapBlazor.Shared/Locales/zh-CN.json b/src/BootstrapBlazor.Shared/Locales/zh-CN.json
@@ -3859,7 +3859,16 @@
     "Controllability": "可控 Controllability",
     "ControllabilityItem1": "用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；",
     "ControllabilityItem2": "结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。",
-    "ButtonText": "切换"
+    "ButtonText": "切换",
+    "HeaderTemplateTitle": "Header 模板",
+    "HeaderTemplateIntro": "通过设置 <code>HeaderTemplate</code> 自定义 <b>Header</b> 显示内容",
+    "CollapseItemAttributeText": "文本文字",
+    "CollapseItemAttributeIcon": "图标字符串",
+    "CollapseItemAttributeTitleColor": "标题颜色",
+    "CollapseItemAttributeClass": "样式名称",
+    "CollapseItemAttributeHeaderClass": "Header CSS 样式名称",
+    "CollapseItemAttributeHeaderTemplate": "Header 模板",
+    "CollapseItemAttributeIsCollapsed": "当前状态是否收缩"
   },
   "BootstrapBlazor.Shared.Components.Samples.DateTimeRanges": {
     "Title": "DateTimeRange 日期时间段选择器",

diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.0.2-beta06</Version>
+    <Version>9.0.2-beta07</Version>
   </PropertyGroup>
 
   <ItemGroup>

diff --git a/src/BootstrapBlazor/Components/Collapse/Collapse.razor b/src/BootstrapBlazor/Components/Collapse/Collapse.razor
@@ -9,8 +9,20 @@
         @foreach (var item in Children)
         {
             <div @key="item" class="@GetItemClassString(item)">
-                <div class="accordion-header">
-                    <Button class="@GetButtonClassString(item)" data-bs-toggle="collapse" data-bs-target="@GetTargetIdString(item)" aria-expanded="@(item.IsCollapsed ? "false" : "true")" Color="item.TitleColor" Text="@item.Text" OnClickWithoutRender="@(() => OnClickItem(item))" Icon="@item.Icon" />
+                <div class="@GetHeaderClassString(item)">
+                    @if (item.HeaderTemplate != null)
+                    {
+                        <div class="accordion-header-body">
+                            @item.HeaderTemplate
+                        </div>
+                    }
+                    <div class="@GetHeaderButtonClassString(item)" data-bs-toggle="collapse" data-bs-target="@GetTargetIdString(item)" aria-expanded="@(item.IsCollapsed ? "false" : "true")" @onclick="() => OnClickItem(item)">
+                        @if(!string.IsNullOrEmpty(item.Icon))
+                        {
+                            <i class="@GetItemIconString(item)"></i>
+                        }
+                        <span>@item.Text</span>
+                    </div>
                 </div>
                 <div class="@GetClassString(item.IsCollapsed)" id="@GetTargetId(item)" data-bs-parent="@ParentIdString">
                     <div class="accordion-body">

diff --git a/src/BootstrapBlazor/Components/Collapse/Collapse.razor.cs b/src/BootstrapBlazor/Components/Collapse/Collapse.razor.cs
@@ -10,8 +10,19 @@ namespace BootstrapBlazor.Components;
 /// </summary>
 public partial class Collapse
 {
-    private static string? GetButtonClassString(CollapseItem item) => CssBuilder.Default("accordion-button")
+    private static string? GetHeaderButtonClassString(CollapseItem item) => CssBuilder.Default("accordion-button")
         .AddClass("collapsed", item.IsCollapsed)
+        .AddClass($"bg-{item.TitleColor.ToDescriptionString()}", item.TitleColor != Color.None)
+        .Build();
+
+    private static string? GetItemIconString(CollapseItem item) => CssBuilder.Default("accordion-item-icon")
+        .AddClass(item.Icon)
+        .Build();
+
+    private static string? GetHeaderClassString(CollapseItem item) => CssBuilder.Default("accordion-header")
+        .AddClass("collapsed", item.IsCollapsed)
+        .AddClass($"bg-{item.TitleColor.ToDescriptionString()}", item.TitleColor != Color.None)
+        .AddClass(item.HeaderClass)
         .Build();
 
     private static string? GetClassString(bool collapsed) => CssBuilder.Default("accordion-collapse collapse")

diff --git a/src/BootstrapBlazor/Components/Collapse/Collapse.razor.scss b/src/BootstrapBlazor/Components/Collapse/Collapse.razor.scss
@@ -3,37 +3,39 @@
     --bs-accordion-btn-padding-x: 1rem;
     --bs-accordion-btn-padding-y: .5rem;
 
-    .accordion-button {
-        &.btn-primary {
-            background-color: var(--bs-primary);
-        }
-
-        &.btn-secondary {
-            background-color: var(--bs-secondary);
-        }
-
-        &.btn-success {
-            background-color: var(--bs-success);
-        }
+    .accordion-header {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        overflow: hidden;
 
-        &.btn-info {
-            background-color: var(--bs-info);
+        &:not(.collapsed) {
+            background-color: var(--bs-accordion-active-bg);
         }
 
-        &.btn-warning {
-            background-color: var(--bs-warning);
-        }
+        .accordion-button {
+            --bs-accordion-inner-border-radius: 0;
+            flex: 1 1 auto;
+            width: 1%;
+            cursor: pointer;
 
-        &.btn-danger {
-            background-color: var(--bs-danger);
+            .accordion-item-icon {
+                margin-inline-end: .5rem;
+            }
         }
+    }
 
-        &.btn-light {
-            background-color: var(--bs-light);
+    .accordion-item:first-of-type {
+        .accordion-header {
+            border-top-left-radius: var(--bs-accordion-inner-border-radius);
+            border-top-right-radius: var(--bs-accordion-inner-border-radius);
         }
+    }
 
-        &.btn-dark {
-            background-color: var(--bs-dark);
+    .accordion-item:last-of-type {
+        .accordion-header.collapsed {
+            border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
+            border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
         }
     }
 }
diff --git a/src/BootstrapBlazor/Components/Collapse/CollapseItem.cs b/src/BootstrapBlazor/Components/Collapse/CollapseItem.cs
@@ -17,7 +17,7 @@ public class CollapseItem : BootstrapComponentBase, IDisposable
     public string? Text { get; set; }
 
     /// <summary>
-    /// 获得/设置 当前状态是否激活 默认 true
+    /// 获得/设置 当前状态是否收缩 默认 true
     /// </summary>
     [Parameter]
     public bool IsCollapsed { get; set; } = true;
@@ -46,11 +46,23 @@ public class CollapseItem : BootstrapComponentBase, IDisposable
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
 
+    /// <summary>
+    /// 获得/设置 Header CSS 样式名称 默认 null
+    /// </summary>
+    [Parameter]
+    public string? HeaderClass { get; set; }
+
+    /// <summary>
+    /// 获得/设置 组件 Header 模板
+    /// </summary>
+    [Parameter]
+    public RenderFragment? HeaderTemplate { get; set; }
+
     /// <summary>
     /// 获得/设置 所属 Collapse 实例
     /// </summary>
     [CascadingParameter]
-    protected Collapse? Collpase { get; set; }
+    protected Collapse? Collapse { get; set; }
 
     /// <summary>
     /// OnInitialized 方法
@@ -59,7 +71,7 @@ protected override void OnInitialized()
     {
         base.OnInitialized();
 
-        Collpase?.AddItem(this);
+        Collapse?.AddItem(this);
     }
 
     /// <summary>
@@ -71,7 +83,7 @@ protected override void OnInitialized()
     private bool disposedValue;
 
     /// <summary>
-    /// 
+    /// 资源销毁
     /// </summary>
     /// <param name="disposing"></param>
     protected virtual void Dispose(bool disposing)
@@ -82,13 +94,13 @@ protected virtual void Dispose(bool disposing)
 
             if (disposing)
             {
-                Collpase?.RemoveItem(this);
+                Collapse?.RemoveItem(this);
             }
         }
     }
 
     /// <summary>
-    /// 
+    /// <inheritdoc/>
     /// </summary>
     public void Dispose()
     {