doc(Table): add IsGroupExtendButtons documentation (#7050)

* doc: 更新样式增加内联布局

* doc: 增加 IsGroupExtendButtons 文档

Author: ArgoZhang

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

@@ -9,9 +9,19 @@
 <h4>@((MarkupString)Localizer["TablesEditDescription"].Value)</h4>
 
 <DemoBlock Title="@Localizer["TablesEditItemsTitle"]" Introduction="@Localizer["TablesEditItemsIntro"]" Name="EditItems">
-    <section ignore>@((MarkupString)Localizer["TablesEditItemsDescription"].Value)</section>
+	<section ignore class="row form-inline g-3">
+		<div class="col-12">
+			<div>@((MarkupString)Localizer["TablesEditItemsDescription"].Value)</div>
+		</div>
+		<div class="col-12 col-sm-6">
+			<BootstrapInputGroup>
+				<BootstrapInputGroupLabel DisplayText="IsGroupExtendButtons"></BootstrapInputGroupLabel>
+				<Switch @bind-Value="_useGroup"></Switch>
+			</BootstrapInputGroup>
+		</div>
+	</section>
     <Table TItem="Foo" @bind-Items="EditItems"
-           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
+		   IsStriped="true" IsBordered="true" IsMultipleSelect="true" IsGroupExtendButtons="_useGroup"
            ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true"
            OnAddAsync="@OnAddAsync">
         <TableColumns>

src/BootstrapBlazor.Server/Components/Samples/Table/TablesEdit.razor.cs

@@ -38,6 +38,8 @@ public partial class TablesEdit
 
     private string DataServiceUrl => $"{WebsiteOption.Value.GiteeRepositoryUrl}/wikis/Table%20%E7%BB%84%E4%BB%B6%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1%E4%BB%8B%E7%BB%8D?sort_id=3207977";
 
+    private bool _useGroup = false;
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>

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

@@ -5179,7 +5179,7 @@
     "TablesEditDescription": "Commonly used in single table maintenance, simple addition, deletion, modification, search, sorting, filtering, search and other common functions can be realized through attribute configuration, and very complex business requirements can be realized through advanced usage of <code>Template</code>",
     "TablesEditItemsTitle": "Use collection as data source to realize editing function",
     "TablesEditItemsIntro": "Set <code>Items</code> as the data source, without setting <code>OnSaveAsync</code> <code>OnDeleteAsync</code> callback delegate to use built-in processing logic to update and delete functions",
-    "TablesEditItemsDescription": "Setting <code>Items</code> as the data source eliminates the need to set <code>OnSaveAsync</code> <code>OnDeleteAsync</code> callback delegates to use built-in processing logic for updates and deletes. Meanwhile, it should be noted that the <code>[Key]</code> tag of the <code>Foo</code> attribute of the class instance <code>Foo</code> of the generic constraint of <code>TItem</code> should be configured correctly",
+    "TablesEditItemsDescription": "Setting <code>Items</code> as the data source eliminates the need to set <code>OnSaveAsync</code> <code>OnDeleteAsync</code> callback delegates to use built-in processing logic for updates and deletes. Meanwhile, it should be noted that the <code>[Key]</code> tag of the <code>Foo</code> attribute of the class instance <code>Foo</code> of the generic constraint of <code>TItem</code> should be configured correctly; The `IsGroupExtendButtons` parameter controls whether the inline function buttons are displayed in a group. The default is `true`.",
     "TablesEditTemplateTitle": "Tables with single table maintenance",
     "TablesEditTemplateIntro": "Set <code>ShowSearch</code> to show the query component",
     "TablesEditTemplateDescription": "In this example, the right alignment of <code>Count</code> is set, the <code>Complete</code> column is set to center alignment, and the Boolean column is automatically rendered as a <code>Switch</code> component",

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

@@ -5179,7 +5179,7 @@
     "TablesEditDescription": "常用于单表维护，通过属性配置实现简单的增、删、改、查、排序、过滤、搜索等常用功能，通过 <code>Template</code> 的高级用法能实现非常复杂的业务需求功能",
     "TablesEditItemsTitle": "使用集合作为数据源实现编辑功能",
     "TablesEditItemsIntro": "设置 <code>Items</code> 作为数据源，无需设置 <code>OnSaveAsync</code> <code>OnDeleteAsync</code> 回调委托使用内置处理逻辑进行更新与删除功能",
-    "TablesEditItemsDescription": "设置 <code>Items</code> 作为数据源，必须使用双向绑定 <code>@bind-Items</code>, 同时 <code>TItem</code> 泛型约束的类实例，如本例中的 <code>Foo</code> ，需要正确配置 <code>[Key]</code> 标签，否则内置编辑功能无法正常工作",
+    "TablesEditItemsDescription": "设置 <code>Items</code> 作为数据源，必须使用双向绑定 <code>@bind-Items</code>, 同时 <code>TItem</code> 泛型约束的类实例，如本例中的 <code>Foo</code> ，需要正确配置 <code>[Key]</code> 标签，否则内置编辑功能无法正常工作；通过设置 <code>IsGroupExtendButtons</code> 参数控制行内功能按钮是否组合显示 默认 <code>true</code>",
     "TablesEditTemplateTitle": "具有单表维护功能的表格",
     "TablesEditTemplateIntro": "通过设置 <code>EditTemplate</code> 自定义编辑弹窗，如果属性需要联动时必须像本例这样封装成一个独立的组件再放置到模板中",
     "TablesEditTemplateDescription": "本例中设置 <code>Count</code> 右侧对齐，<code>Complete</code> 列设置为居中对齐，布尔类型列自动渲染成 <code>Switch</code> 组件，点击 <code>学历</code> 下拉框时右侧只读组件描述信息联动更新，<b>此功能必须封装成独立组件</b>",

src/BootstrapBlazor/Components/Table/Table.razor.scss

@@ -969,6 +969,10 @@ form .table .table-cell > textarea {
     cursor: pointer;
 }
 
-.btn-separate > button:not(:last-child) {
-    margin-inline-end: .25rem;
+.btn-separate {
+    display: inline-flex;
+
+    > button:not(:last-child) {
+        margin-inline-end: .25rem;
+    }
 }