From ef3e37910bc5b52c173b9d4296b98d865a95c654 Mon Sep 17 00:00:00 2001 From: momiji-x670ei <2648863351@qq.com> Date: Wed, 18 Jun 2025 14:46:53 +0800 Subject: [PATCH 1/3] feat(Table): add 'ShowColorWhenToolbarButtonsCollapsed' attribute in 'table' component, add some css style --- .../Components/Table/Table.razor | 2 +- .../Components/Table/Table.razor.Toolbar.cs | 6 +++ .../Components/Table/Table.razor.scss | 40 +++++++++++++++++++ .../Components/Table/TableToolbar.razor.cs | 11 +++++ 4 files changed, 58 insertions(+), 1 deletion(-) diff --git a/src/BootstrapBlazor/Components/Table/Table.razor b/src/BootstrapBlazor/Components/Table/Table.razor index 80d1bc0bed6..70cecd38794 100644 --- a/src/BootstrapBlazor/Components/Table/Table.razor +++ b/src/BootstrapBlazor/Components/Table/Table.razor @@ -40,7 +40,7 @@ @if (ShowToolbar) {
- + @if (TableToolbarBeforeTemplate != null) { @TableToolbarBeforeTemplate diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.Toolbar.cs b/src/BootstrapBlazor/Components/Table/Table.razor.Toolbar.cs index b14991f2869..f11a99bb23e 100644 --- a/src/BootstrapBlazor/Components/Table/Table.razor.Toolbar.cs +++ b/src/BootstrapBlazor/Components/Table/Table.razor.Toolbar.cs @@ -166,6 +166,12 @@ public partial class Table [Parameter] public bool IsAutoCollapsedToolbarButton { get; set; } = true; + /// + /// 获得/设置 工具栏按钮收缩后是否继承原先按钮的颜色样式和中空化 默认 false + /// + [Parameter] + public bool ShowColorWhenToolbarButtonsCollapsed { get; set; } + /// /// 获得/设置 工具栏移动端按钮图标 /// diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.scss b/src/BootstrapBlazor/Components/Table/Table.razor.scss index d454ffb5ad3..ac32af8cc02 100644 --- a/src/BootstrapBlazor/Components/Table/Table.razor.scss +++ b/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; } diff --git a/src/BootstrapBlazor/Components/Table/TableToolbar.razor.cs b/src/BootstrapBlazor/Components/Table/TableToolbar.razor.cs index 1a30e781ba0..73df603c19f 100644 --- a/src/BootstrapBlazor/Components/Table/TableToolbar.razor.cs +++ b/src/BootstrapBlazor/Components/Table/TableToolbar.razor.cs @@ -41,6 +41,12 @@ public partial class TableToolbar : ComponentBase [Parameter] public bool IsAutoCollapsedToolbarButton { get; set; } = true; + /// + /// 获得/设置 工具栏按钮收缩后是否继承原先按钮的颜色样式 默认 false + /// + [Parameter] + public bool ShowColorWhenToolbarButtonsCollapsed { get; set; } + /// /// 获得/设置 移动端按钮图标 /// @@ -53,6 +59,11 @@ public partial class TableToolbar : 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 button) From 95182a591177c99164922f99b43bae3b9d95b6f2 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 18 Jun 2025 18:29:06 +0800 Subject: [PATCH 2/3] chore: bump version 9.7.4-beta08 Co-Authored-By: jin momiji <105467851+momijijin@users.noreply.github.com> --- src/BootstrapBlazor/BootstrapBlazor.csproj | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index 6cfc05514d2..d49673a728c 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -1,7 +1,7 @@  - 9.7.4-beta07 + 9.7.4-beta08 From ffb4a08c0b1414d87a9a9ff0739e69805f24a3c0 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 18 Jun 2025 18:34:20 +0800 Subject: [PATCH 3/3] =?UTF-8?q?test:=20=E5=A2=9E=E5=8A=A0=E5=8D=95?= =?UTF-8?q?=E5=85=83=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- test/UnitTest/Components/TableTest.cs | 1 + 1 file changed, 1 insertion(+) diff --git a/test/UnitTest/Components/TableTest.cs b/test/UnitTest/Components/TableTest.cs index 79228c72651..88b3bd46982 100644 --- a/test/UnitTest/Components/TableTest.cs +++ b/test/UnitTest/Components/TableTest.cs @@ -247,6 +247,7 @@ public void ResetVisibleColumns_Ok() { pb.Add(a => a.RenderMode, TableRenderMode.Table); pb.Add(a => a.ShowToolbar, true); + pb.Add(a => a.ShowColorWhenToolbarButtonsCollapsed, true); pb.Add(a => a.ShowColumnList, true); pb.Add(a => a.Items, Foo.GenerateFoo(localizer, 2)); pb.Add(a => a.TableColumns, foo => builder =>