feat(Table): add 'ShowColorWhenToolbarButtonsCollapsed' attribute in 'table' component, add some css style

Author: momijijin

src/BootstrapBlazor/Components/Table/Table.razor

@@ -40,7 +40,7 @@
         @if (ShowToolbar)
         {
             <div class="table-toolbar">
-                <TableToolbar GearIcon="@GearIcon" OnGetSelectedRows="@GetSelectedRows" IsAutoCollapsedToolbarButton="IsAutoCollapsedToolbarButton">
+                <TableToolbar GearIcon="@GearIcon" OnGetSelectedRows="@GetSelectedRows" IsAutoCollapsedToolbarButton="IsAutoCollapsedToolbarButton" ShowColorWhenToolbarButtonsCollapsed="ShowColorWhenToolbarButtonsCollapsed">
                     @if (TableToolbarBeforeTemplate != null)
                     {
                         @TableToolbarBeforeTemplate

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

@@ -166,6 +166,12 @@ public partial class Table<TItem>
     [Parameter]
     public bool IsAutoCollapsedToolbarButton { get; set; } = true;
 
+    /// <summary>
+    /// 获得/设置 工具栏按钮收缩后是否继承原先按钮的颜色样式和中空化 默认 false
+    /// </summary>
+    [Parameter]
+    public bool ShowColorWhenToolbarButtonsCollapsed { get; set; }
+
     /// <summary>
     /// 获得/设置 工具栏移动端按钮图标
     /// </summary>

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

@@ -338,6 +338,46 @@
     }
 }
 
+.table-toolbar-button .btn-gear .dropdown-menu .dropdown-item-btn-primary {
+    background-color: var(--bs-primary);
+    color: #fff;
+}
+
+.table-toolbar-button .btn-gear .dropdown-menu .dropdown-item-btn-secondary {
+    background-color: var(--bs-secondary);
+    color: #fff;
+}
+
+.table-toolbar-button .btn-gear .dropdown-menu .dropdown-item-btn-success {
+    background-color: var(--bs-success);
+    color: #fff;
+}
+
+.table-toolbar-button .btn-gear .dropdown-menu .dropdown-item-btn-danger {
+    background-color: var(--bs-danger);
+    color: #fff;
+}
+
+.table-toolbar-button .btn-gear .dropdown-menu .dropdown-item-btn-warning {
+    background-color: var(--bs-warning);
+    color: #fff;
+}
+
+.table-toolbar-button .btn-gear .dropdown-menu .dropdown-item-btn-info {
+    background-color: var(--bs-info);
+    color: #fff;
+}
+
+.table-toolbar-button .btn-gear .dropdown-menu .dropdown-item-btn-dark {
+    background-color: var(--bs-dark);
+    color: #fff;
+}
+
+.table-toolbar-button .btn-gear .dropdown-menu .dropdown-item-btn-light {
+    background-color: var(--bs-light);
+    color: #212529;
+}
+
 .btn-gear .dropdown-menu .dropdown-item:not(:first-child) {
     border-inline-start: solid 1px #aeb2b7;
 }

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

@@ -41,6 +41,12 @@ public partial class TableToolbar<TItem> : ComponentBase
     [Parameter]
     public bool IsAutoCollapsedToolbarButton { get; set; } = true;
 
+    /// <summary>
+    /// 获得/设置 工具栏按钮收缩后是否继承原先按钮的颜色样式 默认 false
+    /// </summary>
+    [Parameter]
+    public bool ShowColorWhenToolbarButtonsCollapsed { get; set; }
+
     /// <summary>
     /// 获得/设置 移动端按钮图标
     /// </summary>
@@ -53,6 +59,11 @@ public partial class TableToolbar<TItem> : ComponentBase
 
     private string? GetItemClass(ButtonBase button) => CssBuilder.Default("dropdown-item")
         .AddClass("disabled", GetDisabled(button))
+        .AddClass($"dropdown-item-btn-{button.Color.ToDescriptionString()}",
+            ShowColorWhenToolbarButtonsCollapsed &&
+            !button.IsOutline &&
+            button.Color != Color.None &&
+            button.Color != Color.Link)
         .Build();
 
     private async Task OnToolbarButtonClick(TableToolbarButton<TItem> button)