feat(Table): add MoreButtonText/Color parameter (#7429)

* feat: 增加 Color/Text 参数

* doc: 更新示例文档

* chore: bump version 10.1.5-beta03

* test: 增加单元测试

* test: 更新单元测试

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/Table/TablesColumn.razor

@@ -221,6 +221,8 @@
 <DemoBlock Title="@Localizer["ShowMoreButtonTitle"]" Introduction="@Localizer["ShowMoreButtonIntro"]" Name="ShowMoreButton">
     <section ignore>
         <p>@((MarkupString)Localizer["ShowMoreButtonDesc"].Value)</p>
+        <p>@((MarkupString)Localizer["MoreButtonTextDesc"].Value)</p>
+        <p>@((MarkupString)Localizer["MoreButtonColorDesc"].Value)</p>
         <Pre>&lt;MoreButtonDropdownTemplate&gt;
     &lt;DropdownItem Text="Action1" Icon="fa-solid fa-flag" OnClick="@@(() =&gt; OnAction(context, "Action1"))"&gt;&lt;/DropdownItem&gt;
     &lt;Divider&gt;&lt;/Divider&gt;

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

@@ -5111,7 +5111,9 @@
     "ColumnOrderIntro": "Set the order by setting the <code>Order</code> parameter of <code>TableColumn</code>",
     "ShowMoreButtonTitle": "ShowMoreButton",
     "ShowMoreButtonIntro": "By setting the <code>ShowMoreButton</code> parameter, a <b>More</b> button appears when the row expands. Furthermore, by setting the <code>MoreButtonDropdownTemplate</code> template, the dropdown menu options are customized. This design significantly reduces the amount of row space occupied.",
-    "ShowMoreButtonDesc": "<code>MoreButtonDropdownTemplate</code> Context <code>context</code> is the instance of the current row."
+    "ShowMoreButtonDesc": "<code>MoreButtonDropdownTemplate</code> Context <code>context</code> is the instance of the current row.",
+    "MoreButtonTextDesc": "Set the button's text using <code>MoreButtonText</code>",
+    "MoreButtonColorDesc": "Set the button color using <code>MoreButtonColor</code>"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesColumnDrag": {
     "TablesColumnTitle": "Table Column",

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

@@ -5111,7 +5111,9 @@
     "ColumnOrderIntro": "通过设置 <code>TableColumn</code> 的 <code>Order</code> 参数进行设置顺序",
     "ShowMoreButtonTitle": "更多按钮",
     "ShowMoreButtonIntro": "通过设置 <code>ShowMoreButton</code> 参数使行扩展按钮出现 <b>更多</b> 按钮，通过设置 <code>MoreButtonDropdownTemplate</code> 模板自定义下拉菜单选项，通过这样的设计大大减少行空间占用",
-    "ShowMoreButtonDesc": "<code>MoreButtonDropdownTemplate</code> 上下文 <code>context</code> 为当前行实例"
+    "ShowMoreButtonDesc": "<code>MoreButtonDropdownTemplate</code> 上下文 <code>context</code> 为当前行实例",
+    "MoreButtonTextDesc": "通过 <code>MoreButtonText</code> 设置按钮显示文本",
+    "MoreButtonColorDesc": "通过 <code>MoreButtonColor</code> 设置按钮颜色"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesColumnDrag": {
     "TablesColumnTitle": "Table 表格",

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
-<Project Sdk="Microsoft.NET.Sdk.Razor">
+<Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>10.1.5-beta02</Version>
+    <Version>10.1.5-beta03</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Table/Table.razor

@@ -1041,7 +1041,7 @@
         </td>;
 
     RenderFragment<TItem> RenderMoreButton => item =>
-        @<Dropdown TValue="string" Color="Color.Secondary" IsFixedButtonText="true" FixedButtonText="更多"
+        @<Dropdown TValue="string" Color="@MoreButtonColor" IsFixedButtonText="true" FixedButtonText="@MoreButtonText"
                    Size="Size.ExtraSmall" IsPopover="true" Icon="@MoreButtonIcon">
             <ItemsTemplate>
                 @if (MoreButtonDropdownTemplate != null)

src/BootstrapBlazor/Components/Table/Table.razor.Edit.cs

@@ -1,4 +1,4 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// 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
@@ -157,6 +157,18 @@ public partial class Table<TItem>
     [Parameter]
     public bool ShowMoreButton { get; set; }
 
+    /// <summary>
+    /// 获得/设置 更多按钮颜色 默认 <see cref="Color.Secondary"/>
+    /// </summary>
+    [Parameter]
+    public Color MoreButtonColor { get; set; } = Color.Secondary;
+
+    /// <summary>
+    /// 获得/设置 更多按钮文本 默认 null 读取资源文件设置文本
+    /// </summary>
+    [Parameter]
+    public string? MoreButtonText { get; set; }
+
     /// <summary>
     /// 获得/设置 行内更多按钮下拉框模板 默认 null
     /// </summary>

src/BootstrapBlazor/Components/Table/Table.razor.Localization.cs

@@ -434,5 +434,7 @@ private void OnInitLocalization()
         AlignCenterTooltipText ??= Localizer[nameof(AlignCenterTooltipText)];
         AlignRightText ??= Localizer[nameof(AlignRightText)];
         AlignRightTooltipText ??= Localizer[nameof(AlignRightTooltipText)];
+
+        MoreButtonText ??= Localizer[nameof(MoreButtonText)];
     }
 }

src/BootstrapBlazor/Locales/en.json

@@ -256,7 +256,8 @@
     "AlignRightText": "Right",
     "AlignRightTooltipText": "Click to align text in this column to the right",
     "ColumnListSelectAllText": "All",
-    "ColumnListSelectInvertText": "Invert"
+    "ColumnListSelectInvertText": "Invert",
+    "MoreButtonText": "More"
   },
   "BootstrapBlazor.Components.EditDialog": {
     "CloseButtonText": "Close",

src/BootstrapBlazor/Locales/zh.json

@@ -256,7 +256,8 @@
     "AlignRightText": "右对齐",
     "AlignRightTooltipText": "点击后本列文本右对齐",
     "ColumnListSelectAllText": "全选",
-    "ColumnListSelectInvertText": "反选"
+    "ColumnListSelectInvertText": "反选",
+    "MoreButtonText": "更多"
   },
   "BootstrapBlazor.Components.EditDialog": {
     "CloseButtonText": "关闭",

test/UnitTest/Components/TableTest.cs

@@ -8869,6 +8869,15 @@ public void Table_ShowMoreButton_Ok(TableRenderMode mode)
         });
 
         cut.Contains("<div>dropdown-item-more-template</div");
+        cut.Contains("更多");
+
+        cut.Render(pb =>
+        {
+            pb.Add(a => a.MoreButtonText, "more_button");
+            pb.Add(a => a.MoreButtonColor, Color.Danger);
+        });
+
+        cut.Contains("more_button");
     }
 
     [Fact]