doc(Table): update ShowMoreButton documentation (#7427)

* doc: 移动 ShowMoreButton 示例

* doc: 更新 ShowMoreButton 示例

* doc: 更新更多按钮模板文档

Author: ArgoZhang

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

@@ -1,4 +1,4 @@
-@page "/table/column"
+@page "/table/column"
 @inject IStringLocalizer<NavMenu> NavMenuLocalizer
 @inject IStringLocalizer<TablesColumn> Localizer
 @inject IStringLocalizer<Foo> FooLocalizer
@@ -218,6 +218,34 @@
     </Table>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["ShowMoreButtonTitle"]" Introduction="@Localizer["ShowMoreButtonIntro"]" Name="ShowMoreButton">
+    <section ignore>
+        <p>@((MarkupString)Localizer["ShowMoreButtonDesc"].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;
+    &lt;DropdownItem Text="Action2" Icon="fa-solid fa-home" OnClick="@@(() =&gt; OnAction(context, "Action2"))"&gt;&lt;/DropdownItem&gt;
+&lt;/MoreButtonDropdownTemplate&gt;</Pre>
+    </section>
+    <Table TItem="Foo"
+           IsPagination="true" PageItemsSource="new int[] {10, 20}"
+           IsStriped="true" IsBordered="true" ShowMoreButton="true"
+           ShowToolbar="true" ShowCardView="true" IsMultipleSelect="true" ShowExtendButtons="true"
+           ShowEmpty="true" OnQueryAsync="@OnQueryAsync">
+        <TableColumns>
+            <TableColumn @bind-Field="@context.DateTime" Width="180" />
+            <TableColumn @bind-Field="@context.Name" />
+            <TableColumn @bind-Field="@context.Address" />
+            <TableColumn @bind-Field="@context.Education" />
+        </TableColumns>
+        <MoreButtonDropdownTemplate>
+            <DropdownItem Text="Action1" Icon="fa-solid fa-flag" OnClick="@(() => OnAction(context, "Action1"))"></DropdownItem>
+            <Divider></Divider>
+            <DropdownItem Text="Action2" Icon="fa-solid fa-home" OnClick="@(() => OnAction(context, "Action2"))"></DropdownItem>
+        </MoreButtonDropdownTemplate>
+    </Table>
+</DemoBlock>
+
 <DemoBlock Title="@Localizer["AdvanceTitle"]" Introduction="@Localizer["AdvanceIntro"]" Name="Advance">
     <Table TItem="Foo" IsPagination="true" PageItemsSource="@PageItemsSource" RenderMode="TableRenderMode.Table"
            IsStriped="true" IsBordered="true" OnQueryAsync="OnQueryAsync">

src/BootstrapBlazor.Server/Components/Samples/Table/TablesColumn.razor.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
@@ -192,6 +192,11 @@ private class Company(string name)
         public string Name { get; set; } = name;
     }
 
+    [Inject, NotNull]
+    private ToastService? ToastService { get; set; }
+
+    private Task OnAction(Foo foo, string actionName) => ToastService.Information(foo.Name, $"Trigger {actionName}");
+
     /// <summary>
     /// 示例复杂类型 ComplexFoo
     /// Complex class sample ComplexFoo
@@ -239,8 +244,7 @@ public ComplexFoo(int age)
         /// 返回一个含有随机数据的 ComplexFoo 实例集合
         /// Return a List of ComplexFoo instances with random data
         /// </returns>
-        public static List<ComplexFoo> GenerateComplexFoo(IStringLocalizer<Foo> localizer, int count = 80)
-            => Enumerable.Range(1, count).Select(i => new ComplexFoo(Random.Shared.Next(20, 65))
+        public static List<ComplexFoo> GenerateComplexFoo(IStringLocalizer<Foo> localizer, int count = 80) => Enumerable.Range(1, count).Select(i => new ComplexFoo(Random.Shared.Next(20, 65))
         {
             Id = i,
             Name = localizer["Foo.Name", $"{i:d4}"],

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

@@ -1,4 +1,4 @@
-@page "/table/search"
+@page "/table/search"
 @inject IStringLocalizer<NavMenu> NavMenuLocalizer
 @inject IStringLocalizer<TablesSearch> Localizer
 @inject IStringLocalizer<Foo> FooLocalizer
@@ -49,11 +49,6 @@
                     </div>
                 </GroupBox>
             </SearchTemplate>
-			<MoreButtonDropdownTemplate>
-				<DropdownItem Text="Action1" Icon="fa-solid fa-flag" OnClick="@(() => OnAction(context, "Action1"))"></DropdownItem>
-				<Divider></Divider>
-				<DropdownItem Text="Action2" Icon="fa-solid fa-home" OnClick="@(() => OnAction(context, "Action2"))"></DropdownItem>
-			</MoreButtonDropdownTemplate>
         </Table>
     </div>
 </DemoBlock>

src/BootstrapBlazor.Server/Components/Samples/Table/TablesSearch.razor.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
@@ -183,9 +183,4 @@ private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
             IsAdvanceSearch = options.CustomerSearches.Count > 0 && string.IsNullOrEmpty(options.SearchText),
         });
     }
-
-    [Inject, NotNull]
-    private ToastService? ToastService { get; set; }
-
-    private Task OnAction(Foo foo, string actionName) => ToastService.Information(foo.Name, $"Trigger {actionName}");
 }

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

@@ -5108,7 +5108,10 @@
     "ColumnIgnoreIntro": "By setting the <code>Ignore</code> parameter to control whether the column is rendered, this parameter is different from <code>Visible</code>. Setting<code>Visible=\"false\"</code> to not display the column can be checked and displayed in the list through <code>ShowColumnList=\"true\"</code>",
     "ColumnIgnoreButtonText": "Ignoring/Not Ignoring",
     "ColumnOrderTitle": "Column Order",
-    "ColumnOrderIntro": "Set the order by setting the <code>Order</code> parameter of <code>TableColumn</code>"
+    "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."
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesColumnDrag": {
     "TablesColumnTitle": "Table Column",

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

@@ -5108,7 +5108,10 @@
     "ColumnIgnoreIntro": "通过设置 <code>Ignore</code> 参数控制列是否渲染，此参数与 <code>Visible</code> 不同，设置 <code>Visible=\"false\"</code> 后不显示列可通过 <code>ShowColumnList=\"true\"</code> 在列表中勾选并显示",
     "ColumnIgnoreButtonText": "忽略/不忽略",
     "ColumnOrderTitle": "列顺序",
-    "ColumnOrderIntro": "通过设置 <code>TableColumn</code> 的 <code>Order</code> 参数进行设置顺序"
+    "ColumnOrderIntro": "通过设置 <code>TableColumn</code> 的 <code>Order</code> 参数进行设置顺序",
+    "ShowMoreButtonTitle": "更多按钮",
+    "ShowMoreButtonIntro": "通过设置 <code>ShowMoreButton</code> 参数使行扩展按钮出现 <b>更多</b> 按钮，通过设置 <code>MoreButtonDropdownTemplate</code> 模板自定义下拉菜单选项，通过这样的设计大大减少行空间占用",
+    "ShowMoreButtonDesc": "<code>MoreButtonDropdownTemplate</code> 上下文 <code>context</code> 为当前行实例"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesColumnDrag": {
     "TablesColumnTitle": "Table 表格",