From e1c5b40921bcdcaa5f4bd689d2c66daa7d30844f Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Sun, 16 Mar 2025 11:21:36 +0800 Subject: [PATCH 01/18] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20IsChromeStyl?= =?UTF-8?q?e=20=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/Tab/Tab.razor | 83 +++++++++----- .../Components/Tab/Tab.razor.cs | 14 +++ .../Components/Tab/Tab.razor.scss | 102 ++++++++++++++++++ 3 files changed, 174 insertions(+), 25 deletions(-) diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor b/src/BootstrapBlazor/Components/Tab/Tab.razor index e17ffd6b6cd..ede4ffa0c28 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor @@ -45,39 +45,17 @@ else } @foreach (var item in Items) { - if (item.HeaderTemplate != null) + @if (item.HeaderTemplate != null) { @item.HeaderTemplate(item) } else if (item.IsDisabled) { - + @RenderDisabledHeaderByStyle(item) } else { - - @if (!string.IsNullOrEmpty(item.Icon)) - { - - } - @item.Text - @if (ShowFullScreen && item.ShowFullScreen) - { - - } - @if (ShowClose && item.Closable) - { - - - - } - + @RenderHeaderByStyle(item) } } @if (IsCard || IsBorderCard) @@ -145,4 +123,59 @@ else @ @RenderTabItemContent(item) ; + + RenderFragment RenderChromeDisabledHeader(TabItem item) => + @
+ + + +
; + + RenderFragment RenderDefaultDisabledHeader(TabItem item) => + @; + + RenderFragment RenderChromeHeader(TabItem item) => + @
+ + @RenderHeaderContent(item) + + + +
; + + RenderFragment RenderDefaultHeader(TabItem item) => + @ + @RenderHeaderContent(item) + ; + + RenderFragment RenderHeaderContent(TabItem item) => + @
+ @if (!string.IsNullOrEmpty(item.Icon)) + { + + } + @item.Text + @if (ShowFullScreen && item.ShowFullScreen) + { + + } + @if (ShowClose && item.Closable) + { + + + + } +
; } diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs index e3db268a989..c3cec41f129 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs @@ -24,6 +24,10 @@ public partial class Tab : IHandlerException .AddClass("extend", ShouldShowExtendButtons()) .Build(); + private string? GetItemWrapClassString(TabItem item) => CssBuilder.Default("tabs-item-wrap") + .AddClass("active", item.IsActive) + .Build(); + private string? GetClassString(TabItem item) => CssBuilder.Default("tabs-item") .AddClass("active", item.IsActive) .AddClass("disabled", item.IsDisabled) @@ -283,6 +287,12 @@ public partial class Tab : IHandlerException [Parameter] public Func? OnDragItemEndAsync { get; set; } + /// + /// Gets or sets Whether the tab style is Chrome. Default is false. + /// + [Parameter] + public bool IsChromeStyle { get; set; } + [CascadingParameter] private Layout? Layout { get; set; } @@ -854,6 +864,10 @@ public async Task DragItemCallback(int originIndex, int currentIndex) private string? GetIdByTabItem(TabItem item) => (ShowFullScreen && item.ShowFullScreen) ? ComponentIdGenerator.Generate(item) : null; + private RenderFragment RenderDisabledHeaderByStyle(TabItem item) => IsChromeStyle ? RenderChromeDisabledHeader(item) : RenderDefaultDisabledHeader(item); + + private RenderFragment RenderHeaderByStyle(TabItem item) => IsChromeStyle ? RenderChromeHeader(item) : RenderDefaultHeader(item); + /// /// /// diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss index 087a5eb29da..beb8e0d3608 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss @@ -487,3 +487,105 @@ background-color: var(--bs-primary); } } + +.tabs-item-wrap { + --bb-tabs-header-bg-color: var(--bs-border-color); + --bb-tabs-item-hover-bg-color: #b1cbe6; + --bb-tabs-item-active-bg-color: var(--bs-body-color); + --bb-tabs-item-active-color: var(--bs-body-color); + --bb-tabs-item-hover-color: var(--bs-body-color); + overflow: hidden; + position: relative; + background-color: var(--bb-tabs-header-bg-color); + display: flex; + align-items: flex-end; + padding: 0 1rem; + z-index: 1; + + .tab-corner { + height: 2rem; + width: 2rem; + display: inline-flex; + justify-content: center; + align-items: center; + position: absolute; + background-color: var(--bb-tabs-header-bg-color); + + &::after { + content: ''; + position: absolute; + height: 100%; + width: 100%; + background-color: var(--bb-tabs-header-bg-color); + } + } + + .tab-corner-left { + bottom: 0; + left: -1rem; + + &::after { + border-bottom-right-radius: 50%; + } + } + + .tab-corner-right { + bottom: 0; + right: -1rem; + + &::after { + border-bottom-left-radius: 50%; + } + } + + .tabs-item { + background-color: var(--bb-tabs-header-bg-color); + border: none !important; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + height: 36px !important; + + .active { + background-color: var(--bb-tabs-item-active-bg-color); + } + + .tabs-item-body { + padding: 4px 10px; + display: flex; + align-items: center; + flex-wrap: nowrap; + margin-bottom: 4px; + + .tabs-item-text { + padding: 0 .25rem; + } + + .tabs-item-close { + display: block; + position: unset; + width: 1em; + } + } + } + + &:not(.active) { + .tabs-item .tabs-item-body { + &:hover { + border-radius: 20px; + background-color: var(--bb-tabs-item-hover-bg-color); + } + } + } + + &:not(:first-child) { + margin-left: -2rem; + } + + &.active { + z-index: 5; + + .tab-corner { + background-color: var(--bs-body-bg); + } + } +} From 6816b57b41d81b037c165881e709f1bbc5ab5608 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Sun, 16 Mar 2025 11:54:31 +0800 Subject: [PATCH 02/18] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4=E7=A6=81?= =?UTF-8?q?=E7=94=A8=E9=80=BB=E8=BE=91=E7=A6=81=E7=94=A8=E5=90=8E=E4=B8=8D?= =?UTF-8?q?=E5=85=81=E8=AE=B8=20active=20=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/Tab/Tab.razor | 31 ++++++++----------- .../Components/Tab/Tab.razor.cs | 14 +++++++-- 2 files changed, 24 insertions(+), 21 deletions(-) diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor b/src/BootstrapBlazor/Components/Tab/Tab.razor index ede4ffa0c28..16600bc649d 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor @@ -127,11 +127,7 @@ else RenderFragment RenderChromeDisabledHeader(TabItem item) => @
@@ -139,11 +135,7 @@ else RenderFragment RenderDefaultDisabledHeader(TabItem item) => @; RenderFragment RenderChromeHeader(TabItem item) => @@ -167,15 +159,18 @@ else } @item.Text - @if (ShowFullScreen && item.ShowFullScreen) - { - - } - @if (ShowClose && item.Closable) + @if (!item.IsDisabled) { - - - + @if (ShowFullScreen && item.ShowFullScreen) + { + + } + @if (ShowClose && item.Closable) + { + + + + } }
; } diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs index c3cec41f129..7ead02218a0 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs @@ -24,12 +24,12 @@ public partial class Tab : IHandlerException .AddClass("extend", ShouldShowExtendButtons()) .Build(); - private string? GetItemWrapClassString(TabItem item) => CssBuilder.Default("tabs-item-wrap") - .AddClass("active", item.IsActive) + private static string? GetItemWrapClassString(TabItem item) => CssBuilder.Default("tabs-item-wrap") + .AddClass("active", item.IsActive && !item.IsDisabled) .Build(); private string? GetClassString(TabItem item) => CssBuilder.Default("tabs-item") - .AddClass("active", item.IsActive) + .AddClass("active", item.IsActive && !item.IsDisabled) .AddClass("disabled", item.IsDisabled) .AddClass(item.CssClass) .AddClass("is-closeable", ShowClose) @@ -793,6 +793,14 @@ private void ActiveTabItem(TabItem item) public void SetDisabledItem(TabItem item, bool disabled) { item.SetDisabledWithoutRender(disabled); + if (disabled) + { + item.SetActive(false); + } + if (TabItems.Any(i => i.IsActive) == false) + { + TabItems.Where(i => !i.IsDisabled).FirstOrDefault()?.SetActive(true); + } StateHasChanged(); } From 2fc00ad09eb185fed82751faad90ae0cd8f338d9 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Sun, 16 Mar 2025 11:54:39 +0800 Subject: [PATCH 03/18] =?UTF-8?q?style:=20=E9=87=8D=E6=9E=84=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Tab/Tab.razor.scss | 83 ++++++++++--------- 1 file changed, 42 insertions(+), 41 deletions(-) diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss index beb8e0d3608..5904a834d9b 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss @@ -502,40 +502,25 @@ padding: 0 1rem; z-index: 1; - .tab-corner { - height: 2rem; - width: 2rem; - display: inline-flex; - justify-content: center; - align-items: center; - position: absolute; - background-color: var(--bb-tabs-header-bg-color); + &.active { + z-index: 5; - &::after { - content: ''; - position: absolute; - height: 100%; - width: 100%; - background-color: var(--bb-tabs-header-bg-color); + .tab-corner { + background-color: var(--bs-body-bg); } } - .tab-corner-left { - bottom: 0; - left: -1rem; - - &::after { - border-bottom-right-radius: 50%; + &:not(.active) { + .tabs-item:not(.disabled) .tabs-item-body { + &:hover { + border-radius: 20px; + background-color: var(--bb-tabs-item-hover-bg-color); + } } } - .tab-corner-right { - bottom: 0; - right: -1rem; - - &::after { - border-bottom-left-radius: 50%; - } + &:not(:first-child) { + margin-left: -2rem; } .tabs-item { @@ -561,31 +546,47 @@ } .tabs-item-close { - display: block; + display: flex; position: unset; - width: 1em; + width: 21px; + height: 21px; + border-radius: 50%; } } } - &:not(.active) { - .tabs-item .tabs-item-body { - &:hover { - border-radius: 20px; - background-color: var(--bb-tabs-item-hover-bg-color); - } + .tab-corner { + height: 2rem; + width: 2rem; + display: inline-flex; + justify-content: center; + align-items: center; + position: absolute; + + &::after { + content: ''; + position: absolute; + height: 100%; + width: 100%; + background-color: var(--bb-tabs-header-bg-color); } } - &:not(:first-child) { - margin-left: -2rem; + .tab-corner-left { + bottom: 0; + left: -1rem; + + &::after { + border-bottom-right-radius: 50%; + } } - &.active { - z-index: 5; + .tab-corner-right { + bottom: 0; + right: -1rem; - .tab-corner { - background-color: var(--bs-body-bg); + &::after { + border-bottom-left-radius: 50%; } } } From 36b3a272cfc9e380ad792521144c7eb19bb708c8 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Sun, 16 Mar 2025 12:31:57 +0800 Subject: [PATCH 04/18] =?UTF-8?q?refactor:=20=E5=A2=9E=E5=8A=A0=20tabs-chr?= =?UTF-8?q?ome=20=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Tab/Tab.razor.cs | 3 +- .../Components/Tab/Tab.razor.scss | 151 +++++++++--------- 2 files changed, 81 insertions(+), 73 deletions(-) diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs index 7ead02218a0..28239d6fb3b 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs @@ -43,7 +43,8 @@ public partial class Tab : IHandlerException .AddClass("tabs-card", IsCard) .AddClass("tabs-border-card", IsBorderCard) .AddClass($"tabs-{Placement.ToDescriptionString()}", Placement == Placement.Top || Placement == Placement.Right || Placement == Placement.Bottom || Placement == Placement.Left) - .AddClass($"tabs-vertical", Placement == Placement.Left || Placement == Placement.Right) + .AddClass("tabs-vertical", Placement == Placement.Left || Placement == Placement.Right) + .AddClass("tabs-chrome", IsChromeStyle) .AddClassFromAttributes(AdditionalAttributes) .Build(); diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss index 5904a834d9b..f6b10f5d567 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss @@ -488,105 +488,112 @@ } } -.tabs-item-wrap { +.tabs-chrome { --bb-tabs-header-bg-color: var(--bs-border-color); - --bb-tabs-item-hover-bg-color: #b1cbe6; + --bb-tabs-item-hover-bg-color: rgba(var(--bs-body-color-rgb), 0.1); --bb-tabs-item-active-bg-color: var(--bs-body-color); --bb-tabs-item-active-color: var(--bs-body-color); --bb-tabs-item-hover-color: var(--bs-body-color); - overflow: hidden; - position: relative; - background-color: var(--bb-tabs-header-bg-color); - display: flex; - align-items: flex-end; - padding: 0 1rem; - z-index: 1; - &.active { - z-index: 5; + .tabs-item-wrap { + overflow: hidden; + position: relative; + background-color: var(--bb-tabs-header-bg-color); + display: flex; + align-items: flex-end; + padding: 0 1rem; + z-index: 1; - .tab-corner { - background-color: var(--bs-body-bg); - } - } + &.active { + z-index: 5; - &:not(.active) { - .tabs-item:not(.disabled) .tabs-item-body { - &:hover { - border-radius: 20px; - background-color: var(--bb-tabs-item-hover-bg-color); + .tab-corner { + background-color: var(--bs-body-bg); } } - } - - &:not(:first-child) { - margin-left: -2rem; - } - .tabs-item { - background-color: var(--bb-tabs-header-bg-color); - border: none !important; - border-top-left-radius: 10px; - border-top-right-radius: 10px; - height: 36px !important; + &:not(.active) { + .tabs-item:not(.disabled) .tabs-item-body { + &:hover { + border-radius: 20px; + background-color: var(--bb-tabs-item-hover-bg-color); + } + } + } - .active { - background-color: var(--bb-tabs-item-active-bg-color); + &:not(:first-child) { + margin-left: -2rem; } - .tabs-item-body { - padding: 4px 10px; - display: flex; - align-items: center; - flex-wrap: nowrap; - margin-bottom: 4px; + .tabs-item { + background-color: var(--bb-tabs-header-bg-color); + border: none !important; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + height: 36px !important; - .tabs-item-text { - padding: 0 .25rem; + .active { + background-color: var(--bb-tabs-item-active-bg-color); } - .tabs-item-close { + .tabs-item-body { + padding: 4px 10px; display: flex; - position: unset; - width: 21px; - height: 21px; - border-radius: 50%; + align-items: center; + flex-wrap: nowrap; + margin-bottom: 4px; + + .tabs-item-text { + padding: 0 .25rem; + } + + .tabs-item-close { + display: flex; + position: unset; + width: 21px; + height: 21px; + border-radius: 50%; + } } } - } - - .tab-corner { - height: 2rem; - width: 2rem; - display: inline-flex; - justify-content: center; - align-items: center; - position: absolute; - &::after { - content: ''; + .tab-corner { + height: 2rem; + width: 2rem; + display: inline-flex; + justify-content: center; + align-items: center; position: absolute; - height: 100%; - width: 100%; - background-color: var(--bb-tabs-header-bg-color); + + &::after { + content: ''; + position: absolute; + height: 100%; + width: 100%; + background-color: var(--bb-tabs-header-bg-color); + } } - } - .tab-corner-left { - bottom: 0; - left: -1rem; + .tab-corner-left { + bottom: 0; + left: -1rem; - &::after { - border-bottom-right-radius: 50%; + &::after { + border-bottom-right-radius: 50%; + } } - } - .tab-corner-right { - bottom: 0; - right: -1rem; + .tab-corner-right { + bottom: 0; + right: -1rem; - &::after { - border-bottom-left-radius: 50%; + &::after { + border-bottom-left-radius: 50%; + } } } + + .tabs-item-fix { + background-color: var(--bb-tabs-header-bg-color); + } } From b4f9d5d2070aea7366bb56f05539cae7306c5add Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Sun, 16 Mar 2025 12:46:53 +0800 Subject: [PATCH 05/18] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/Tab/Tab.razor.cs | 2 +- src/BootstrapBlazor/Components/Tab/Tab.razor.scss | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs index 28239d6fb3b..3f51247c365 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs @@ -29,7 +29,7 @@ public partial class Tab : IHandlerException .Build(); private string? GetClassString(TabItem item) => CssBuilder.Default("tabs-item") - .AddClass("active", item.IsActive && !item.IsDisabled) + .AddClass("active", !IsChromeStyle && item.IsActive && !item.IsDisabled) .AddClass("disabled", item.IsDisabled) .AddClass(item.CssClass) .AddClass("is-closeable", ShowClose) diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss index f6b10f5d567..3803c6c9dda 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss @@ -491,7 +491,7 @@ .tabs-chrome { --bb-tabs-header-bg-color: var(--bs-border-color); --bb-tabs-item-hover-bg-color: rgba(var(--bs-body-color-rgb), 0.1); - --bb-tabs-item-active-bg-color: var(--bs-body-color); + --bb-tabs-item-active-bg-color: var(--bs-body-bg); --bb-tabs-item-active-color: var(--bs-body-color); --bb-tabs-item-hover-color: var(--bs-body-color); @@ -510,6 +510,10 @@ .tab-corner { background-color: var(--bs-body-bg); } + + .tabs-item { + background-color: var(--bb-tabs-item-active-bg-color); + } } &:not(.active) { @@ -532,10 +536,6 @@ border-top-right-radius: 10px; height: 36px !important; - .active { - background-color: var(--bb-tabs-item-active-bg-color); - } - .tabs-item-body { padding: 4px 10px; display: flex; From d53448147e30bc181bc00d7a7b4abe8728fc72cf Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Sun, 16 Mar 2025 12:57:37 +0800 Subject: [PATCH 06/18] =?UTF-8?q?doc:=20=E5=A2=9E=E5=8A=A0=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Samples/Tabs.razor | 17 +++++++++++++++++ src/BootstrapBlazor.Server/Locales/en-US.json | 4 +++- src/BootstrapBlazor.Server/Locales/zh-CN.json | 4 +++- 3 files changed, 23 insertions(+), 2 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor b/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor index de702f52368..2dde5bbbc08 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor @@ -436,6 +436,23 @@ private void Navigation() + + + +
@Localizer["TabItem1Content"]
+ + +
@Localizer["TabItem2Content"]
+ + +
@Localizer["TabItem3Content"]
+ + +
@Localizer["TabItem4Content"]
+ + + + diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index 94e5b78975b..18cbfa01704 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -2116,7 +2116,9 @@ "AttributeExcludeUrls": "Exclude address support for wildcards", "AttributeButtonTemplate": "The template for Buttons", "TabsDisabledTitle": "Disabled", - "TabsDisabledIntro": "Disable the current TabItem by setting IsDisabled=\"true\" to prohibit click, drag, close etc." + "TabsDisabledIntro": "Disable the current TabItem by setting IsDisabled=\"true\" to prohibit click, drag, close etc.", + "TabsIsChromeStyleTitle": "Chrome Style", + "TabsIsChromeStyleIntro": "Set the Chrome browser tab style by setting IsChromeStyle=\"true\"" }, "BootstrapBlazor.Server.Components.Components.DemoTabItem": { "Info": "Reset the title of this TabItem by click the button", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 9fe32229fa2..bb7ee59237b 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -2116,7 +2116,9 @@ "AttributeExcludeUrls": "排除地址支持通配符", "AttributeButtonTemplate": "按钮模板", "TabsDisabledTitle": "禁用", - "TabsDisabledIntro": "通过设置 IsDisabled=\"true\" 禁用当前 TabItem 禁止点击、拖动、关闭等操作" + "TabsDisabledIntro": "通过设置 IsDisabled=\"true\" 禁用当前 TabItem 禁止点击、拖动、关闭等操作", + "TabsIsChromeStyleTitle": "Chrome 样式", + "TabsIsChromeStyleIntro": "通过设置 IsChromeStyle=\"true\" 设置 Chrome 浏览器标签页样式" }, "BootstrapBlazor.Server.Components.Components.DemoTabItem": { "Info": "点击下方按钮，本 TabItem 标题更改为当前分钟与秒", From e8f32d59fa4869393e63c70902e1fcdc2466af5c Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Sun, 16 Mar 2025 13:03:51 +0800 Subject: [PATCH 07/18] =?UTF-8?q?refactor:=20=E5=A2=9E=E5=8A=A0=20TabStyle?= =?UTF-8?q?=20=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Tab/Tab.razor.cs | 12 +++++----- src/BootstrapBlazor/Enums/TabStyle.cs | 22 +++++++++++++++++++ 2 files changed, 28 insertions(+), 6 deletions(-) create mode 100644 src/BootstrapBlazor/Enums/TabStyle.cs diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs index 3f51247c365..78648ccce58 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs @@ -29,7 +29,7 @@ public partial class Tab : IHandlerException .Build(); private string? GetClassString(TabItem item) => CssBuilder.Default("tabs-item") - .AddClass("active", !IsChromeStyle && item.IsActive && !item.IsDisabled) + .AddClass("active", TabStyle == TabStyle.Default && item.IsActive && !item.IsDisabled) .AddClass("disabled", item.IsDisabled) .AddClass(item.CssClass) .AddClass("is-closeable", ShowClose) @@ -44,7 +44,7 @@ public partial class Tab : IHandlerException .AddClass("tabs-border-card", IsBorderCard) .AddClass($"tabs-{Placement.ToDescriptionString()}", Placement == Placement.Top || Placement == Placement.Right || Placement == Placement.Bottom || Placement == Placement.Left) .AddClass("tabs-vertical", Placement == Placement.Left || Placement == Placement.Right) - .AddClass("tabs-chrome", IsChromeStyle) + .AddClass("tabs-chrome", TabStyle == TabStyle.Chrome) .AddClassFromAttributes(AdditionalAttributes) .Build(); @@ -289,10 +289,10 @@ public partial class Tab : IHandlerException public Func? OnDragItemEndAsync { get; set; } /// - /// Gets or sets Whether the tab style is Chrome. Default is false. + /// Gets or sets the tab style. Default is . /// [Parameter] - public bool IsChromeStyle { get; set; } + public TabStyle TabStyle { get; set; } [CascadingParameter] private Layout? Layout { get; set; } @@ -873,9 +873,9 @@ public async Task DragItemCallback(int originIndex, int currentIndex) private string? GetIdByTabItem(TabItem item) => (ShowFullScreen && item.ShowFullScreen) ? ComponentIdGenerator.Generate(item) : null; - private RenderFragment RenderDisabledHeaderByStyle(TabItem item) => IsChromeStyle ? RenderChromeDisabledHeader(item) : RenderDefaultDisabledHeader(item); + private RenderFragment RenderDisabledHeaderByStyle(TabItem item) => TabStyle == TabStyle.Chrome ? RenderChromeDisabledHeader(item) : RenderDefaultDisabledHeader(item); - private RenderFragment RenderHeaderByStyle(TabItem item) => IsChromeStyle ? RenderChromeHeader(item) : RenderDefaultHeader(item); + private RenderFragment RenderHeaderByStyle(TabItem item) => TabStyle == TabStyle.Chrome ? RenderChromeHeader(item) : RenderDefaultHeader(item); /// /// diff --git a/src/BootstrapBlazor/Enums/TabStyle.cs b/src/BootstrapBlazor/Enums/TabStyle.cs new file mode 100644 index 00000000000..8b49a7bfe53 --- /dev/null +++ b/src/BootstrapBlazor/Enums/TabStyle.cs @@ -0,0 +1,22 @@ +// 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 + +namespace BootstrapBlazor.Components; + +/// +/// Tab style emnu +/// +public enum TabStyle +{ + /// + /// The default style + /// + Default, + + /// + /// The Chrome style + /// + Chrome +} From 260551c7dec86de93a8b3b319b254ec8e3ff95f4 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Sun, 16 Mar 2025 13:03:59 +0800 Subject: [PATCH 08/18] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Server/Components/Samples/Tabs.razor | 4 ++-- .../Components/Samples/Tabs.razor.cs | 8 ++++++++ src/BootstrapBlazor.Server/Locales/en-US.json | 4 ++-- src/BootstrapBlazor.Server/Locales/zh-CN.json | 4 ++-- 4 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor b/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor index 2dde5bbbc08..486ea83e219 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor @@ -436,8 +436,8 @@ private void Navigation() - - + +
@Localizer["TabItem1Content"]
 diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor.cs index ad0babd0d43..112a6f152d1 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor.cs @@ -194,6 +194,14 @@ private AttributeItem[] GetAttributes() => DefaultValue = "false" }, new() + { + Name = "TabStyle", + Description = Localizer["TabAtt2TabStyle"].Value, + Type = "enum", + ValueList = "Default|Chrome", + DefaultValue = "Default" + }, + new() { Name = "IsOnlyRenderActiveTab", Description = Localizer["TabAtt3IsOnlyRenderActiveTab"].Value, diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index 18cbfa01704..be240958cc2 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -2117,8 +2117,8 @@ "AttributeButtonTemplate": "The template for Buttons", "TabsDisabledTitle": "Disabled", "TabsDisabledIntro": "Disable the current TabItem by setting IsDisabled=\"true\" to prohibit click, drag, close etc.", - "TabsIsChromeStyleTitle": "Chrome Style", - "TabsIsChromeStyleIntro": "Set the Chrome browser tab style by setting IsChromeStyle=\"true\"" + "TabsChromeStyleTitle": "Chrome Style", + "TabsChromeStyleIntro": "Set the Chrome browser tab style by setting TabStyle=\"TabStyle.Chrome\"" }, "BootstrapBlazor.Server.Components.Components.DemoTabItem": { "Info": "Reset the title of this TabItem by click the button", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index bb7ee59237b..42ffca82a3a 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -2117,8 +2117,8 @@ "AttributeButtonTemplate": "按钮模板", "TabsDisabledTitle": "禁用", "TabsDisabledIntro": "通过设置 IsDisabled=\"true\" 禁用当前 TabItem 禁止点击、拖动、关闭等操作", - "TabsIsChromeStyleTitle": "Chrome 样式", - "TabsIsChromeStyleIntro": "通过设置 IsChromeStyle=\"true\" 设置 Chrome 浏览器标签页样式" + "TabsChromeStyleTitle": "Chrome 样式", + "TabsChromeStyleIntro": "通过设置 TabStyle=\"TabStyle.Chrome\" 设置 Chrome 浏览器标签页样式" }, "BootstrapBlazor.Server.Components.Components.DemoTabItem": { "Info": "点击下方按钮，本 TabItem 标题更改为当前分钟与秒", From c07f9e94e1ec6a967296d44d7414dbc005a81b39 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Sun, 16 Mar 2025 14:25:51 +0800 Subject: [PATCH 09/18] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E5=8F=82?= =?UTF-8?q?=E6=95=B0=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Samples/Tabs.razor.cs | 28 +++++++++---------- src/BootstrapBlazor.Server/Locales/en-US.json | 4 ++- src/BootstrapBlazor.Server/Locales/zh-CN.json | 4 ++- 3 files changed, 20 insertions(+), 16 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor.cs index 112a6f152d1..f2931ce1af5 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor.cs @@ -194,14 +194,6 @@ private AttributeItem[] GetAttributes() => DefaultValue = "false" }, new() - { - Name = "TabStyle", - Description = Localizer["TabAtt2TabStyle"].Value, - Type = "enum", - ValueList = "Default|Chrome", - DefaultValue = "Default" - }, - new() { Name = "IsOnlyRenderActiveTab", Description = Localizer["TabAtt3IsOnlyRenderActiveTab"].Value, @@ -212,7 +204,7 @@ private AttributeItem[] GetAttributes() => new() { Name = "IsLazyLoadTabItem", - Description = Localizer["AttributeIsLazyLoadTabItem"].Value, + Description = Localizer["TabAttIsLazyLoadTabItem"].Value, Type = "boolean", ValueList = "true/false", DefaultValue = "false" @@ -230,21 +222,21 @@ private AttributeItem[] GetAttributes() => Name = "ShowExtendButtons", Description = Localizer["TabAtt5ShowExtendButtons"].Value, Type = "boolean", - ValueList = " — ", + ValueList = "true|false", DefaultValue = "false" }, new() { - Name = "ShowExtendButtons", - Description = Localizer["TabAttrShowNavigatorButtons"].Value, + Name = "ShowNavigatorButtons", + Description = Localizer["TabAttShowNavigatorButtons"].Value, Type = "boolean", ValueList = "true|false", DefaultValue = "true" }, new() { - Name = "ShowExtendButtons", - Description = Localizer["TabAttrShowActiveBar"].Value, + Name = "ShowActiveBar", + Description = Localizer["TabAttShowActiveBar"].Value, Type = "boolean", ValueList = "true|false", DefaultValue = "true" @@ -258,6 +250,14 @@ private AttributeItem[] GetAttributes() => DefaultValue = "false" }, new() + { + Name = "TabStyle", + Description = Localizer["TabAtt2TabStyle"].Value, + Type = "TabStyle", + ValueList = "Default|Chrome", + DefaultValue = "Default" + }, + new() { Name = "Placement", Description = Localizer["TabAtt7Placement"].Value, diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index be240958cc2..a4fe1ecdb53 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -2083,6 +2083,7 @@ "TabAtt5ShowExtendButtons": "Whether to display the extension button", "TabAttShowNavigatorButtons": "Whether to display the previous and next navigation buttons", "TabAttShowActiveBar": "Whether to display active bar", + "TabAttIsLazyLoadTabItem": "Whether lazy load tab item", "TabAtt6ClickTabToNavigation": "Whether to navigate when you click on the title", "TabAtt7Placement": "Set the label position", "TabAtt8Height": "Set the label height", @@ -2118,7 +2119,8 @@ "TabsDisabledTitle": "Disabled", "TabsDisabledIntro": "Disable the current TabItem by setting IsDisabled=\"true\" to prohibit click, drag, close etc.", "TabsChromeStyleTitle": "Chrome Style", - "TabsChromeStyleIntro": "Set the Chrome browser tab style by setting TabStyle=\"TabStyle.Chrome\"" + "TabsChromeStyleIntro": "Set the Chrome browser tab style by setting TabStyle=\"TabStyle.Chrome\"", + "TabAtt2TabStyle": "Set the tab style" }, "BootstrapBlazor.Server.Components.Components.DemoTabItem": { "Info": "Reset the title of this TabItem by click the button", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 42ffca82a3a..49188f0e45e 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -2083,6 +2083,7 @@ "TabAtt5ShowExtendButtons": "是否显示扩展按钮", "TabAttShowNavigatorButtons": "是否显示前后导航按钮", "TabAttShowActiveBar": "是否显示活动标签", + "TabAttIsLazyLoadTabItem": "是否延时加载标签内容", "TabAtt6ClickTabToNavigation": "点击标题时是否导航", "TabAtt7Placement": "设置标签位置", "TabAtt8Height": "设置标签高度", @@ -2118,7 +2119,8 @@ "TabsDisabledTitle": "禁用", "TabsDisabledIntro": "通过设置 IsDisabled=\"true\" 禁用当前 TabItem 禁止点击、拖动、关闭等操作", "TabsChromeStyleTitle": "Chrome 样式", - "TabsChromeStyleIntro": "通过设置 TabStyle=\"TabStyle.Chrome\" 设置 Chrome 浏览器标签页样式" + "TabsChromeStyleIntro": "通过设置 TabStyle=\"TabStyle.Chrome\" 设置 Chrome 浏览器标签页样式", + "TabAtt2TabStyle": "设置标签页样式" }, "BootstrapBlazor.Server.Components.Components.DemoTabItem": { "Info": "点击下方按钮，本 TabItem 标题更改为当前分钟与秒", From b4386c8e42f8fe4017273e66de4818bcac1167df Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Sun, 16 Mar 2025 14:55:49 +0800 Subject: [PATCH 10/18] =?UTF-8?q?test:=20=E6=9B=B4=E6=96=B0=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/TabTest.cs | 45 +++++++++++++++++++++++++++-- 1 file changed, 43 insertions(+), 2 deletions(-) diff --git a/test/UnitTest/Components/TabTest.cs b/test/UnitTest/Components/TabTest.cs index 7f5c782871e..36016872b1a 100644 --- a/test/UnitTest/Components/TabTest.cs +++ b/test/UnitTest/Components/TabTest.cs @@ -406,13 +406,13 @@ public async Task IsDisabled_Ok() pb.AddChildContent(); }); }); - Assert.Contains("
Text1
", cut.Markup); + Assert.Contains("
Text1
", cut.Markup); var button = cut.FindComponent(); Assert.NotNull(button); await cut.InvokeAsync(() => button.Instance.OnDisabledTabItem()); - Assert.Contains("
Text2
", cut.Markup); + Assert.Contains("
Text2
", cut.Markup); } [Fact] @@ -422,6 +422,47 @@ public void SetDisabled_Ok() cut.Instance.SetDisabled(true); } + [Fact] + public async Task TabStyle_Chrome_Ok() + { + var clicked = false; + var cut = Context.RenderComponent(pb => + { + pb.Add(a => a.TabStyle, TabStyle.Chrome); + pb.Add(a => a.OnClickTabItemAsync, item => + { + clicked = true; + return Task.CompletedTask; + }); + pb.AddChildContent(pb => + { + pb.Add(a => a.Text, "Text1"); + pb.Add(a => a.ChildContent, builder => builder.AddContent(0, "Test1")); + pb.Add(a => a.Icon, "fa fa-fa"); + }); + pb.AddChildContent(pb => + { + pb.Add(a => a.IsActive, true); + pb.Add(a => a.Text, "Text2"); + pb.AddChildContent(); + }); + }); + cut.Contains("tabs tabs-top tabs-chrome"); + cut.Contains("tabs-item-wrap active"); + cut.Contains(""); + cut.Contains(""); + + var button = cut.FindComponent(); + Assert.NotNull(button); + await cut.InvokeAsync(() => button.Instance.OnDisabledTabItem()); + cut.Contains("
Text2
"); + + // trigger click + var link = cut.Find("a"); + await cut.InvokeAsync(() => link.Click()); + Assert.True(clicked); + } + [Fact] public void MenuItem_Null() { From 723fe0b29d582b1c8283bc4927211799b945147a Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Sun, 16 Mar 2025 15:00:17 +0800 Subject: [PATCH 11/18] =?UTF-8?q?refactor:=20=E5=A2=9E=E5=8A=A0=20Placemen?= =?UTF-8?q?t=20=E5=8F=82=E6=95=B0=E9=99=90=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/Tab/Tab.razor.cs | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs index 78648ccce58..87617adb630 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs @@ -363,6 +363,11 @@ protected override void OnParametersSet() AdditionalAssemblies ??= new[] { Assembly.GetEntryAssembly()! }; + if (Placement != Placement.Top && TabStyle == TabStyle.Chrome) + { + TabStyle = TabStyle.Default; + } + if (ClickTabToNavigation) { if (!HandlerNavigation) From 12b1aa1dd2c5a707a1e457ea4dd7f72cfb05d1c8 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Sun, 16 Mar 2025 15:00:26 +0800 Subject: [PATCH 12/18] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Server/Locales/en-US.json | 2 +- src/BootstrapBlazor.Server/Locales/zh-CN.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index a4fe1ecdb53..983ebb04f82 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -2119,7 +2119,7 @@ "TabsDisabledTitle": "Disabled", "TabsDisabledIntro": "Disable the current TabItem by setting IsDisabled=\"true\" to prohibit click, drag, close etc.", "TabsChromeStyleTitle": "Chrome Style", - "TabsChromeStyleIntro": "Set the Chrome browser tab style by setting TabStyle=\"TabStyle.Chrome\"", + "TabsChromeStyleIntro": "Set the Chrome browser tab style by setting TabStyle=\"TabStyle.Chrome\". Currently only supports Placement=\"Placement.Top\" mode", "TabAtt2TabStyle": "Set the tab style" }, "BootstrapBlazor.Server.Components.Components.DemoTabItem": { diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 49188f0e45e..d7e6392ffb6 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -2119,7 +2119,7 @@ "TabsDisabledTitle": "禁用", "TabsDisabledIntro": "通过设置 IsDisabled=\"true\" 禁用当前 TabItem 禁止点击、拖动、关闭等操作", "TabsChromeStyleTitle": "Chrome 样式", - "TabsChromeStyleIntro": "通过设置 TabStyle=\"TabStyle.Chrome\" 设置 Chrome 浏览器标签页样式", + "TabsChromeStyleIntro": "通过设置 TabStyle=\"TabStyle.Chrome\" 设置 Chrome 浏览器标签页样式，目前仅支持 Placement=\"Placement.Top\" 模式", "TabAtt2TabStyle": "设置标签页样式" }, "BootstrapBlazor.Server.Components.Components.DemoTabItem": { From 2dcf84c05be7cf56612fbe43059052f987d1c462 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Sun, 16 Mar 2025 15:00:32 +0800 Subject: [PATCH 13/18] =?UTF-8?q?test:=20=E6=9B=B4=E6=96=B0=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/TabTest.cs | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/test/UnitTest/Components/TabTest.cs b/test/UnitTest/Components/TabTest.cs index 36016872b1a..3f1783e941b 100644 --- a/test/UnitTest/Components/TabTest.cs +++ b/test/UnitTest/Components/TabTest.cs @@ -461,6 +461,13 @@ public async Task TabStyle_Chrome_Ok() var link = cut.Find("a"); await cut.InvokeAsync(() => link.Click()); Assert.True(clicked); + + // placement top and chrome style + cut.SetParametersAndRender(pb => + { + pb.Add(a => a.Placement, Placement.Left); + }); + Assert.Equal(TabStyle.Default, cut.Instance.TabStyle); } [Fact] From a8de90a5f46a9c5803909e4c05e930f2c127c261 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Sun, 16 Mar 2025 15:01:38 +0800 Subject: [PATCH 14/18] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Layout/ComponentLayout.razor | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/BootstrapBlazor.Server/Components/Layout/ComponentLayout.razor b/src/BootstrapBlazor.Server/Components/Layout/ComponentLayout.razor index 2c6e81b35e4..3fa93db5737 100644 --- a/src/BootstrapBlazor.Server/Components/Layout/ComponentLayout.razor +++ b/src/BootstrapBlazor.Server/Components/Layout/ComponentLayout.razor @@ -30,7 +30,7 @@
- + @Body From 7a4bb95c3504146dddf1fc503d94af18e55c6876 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Sun, 16 Mar 2025 15:06:54 +0800 Subject: [PATCH 15/18] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/Tab/Tab.razor.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss index 3803c6c9dda..e26eb0868e9 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss @@ -544,7 +544,7 @@ margin-bottom: 4px; .tabs-item-text { - padding: 0 .25rem; + padding: 0 .5rem; } .tabs-item-close { @@ -591,6 +591,10 @@ border-bottom-left-radius: 50%; } } + + .btn-fs { + padding: 0; + } } .tabs-item-fix { From 25e7856900c47440914f1abd0012444c2755e3ae Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Sun, 16 Mar 2025 15:10:58 +0800 Subject: [PATCH 16/18] =?UTF-8?q?style:=20=E6=9B=B4=E6=96=B0=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/Tab/Tab.razor.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss index e26eb0868e9..5e59dd69b04 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss @@ -501,6 +501,7 @@ background-color: var(--bb-tabs-header-bg-color); display: flex; align-items: flex-end; + flex-shrink: 0; padding: 0 1rem; z-index: 1; From 2aa102584cc8a9afee8d799e3d30008a4aa855dd Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Sun, 16 Mar 2025 15:16:33 +0800 Subject: [PATCH 17/18] =?UTF-8?q?style:=20=E6=9B=B4=E6=96=B0=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/Tab/Tab.razor.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss index 5e59dd69b04..6dd4c58cffa 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss @@ -600,5 +600,6 @@ .tabs-item-fix { background-color: var(--bb-tabs-header-bg-color); + border: none; } } From 90beb5802757ab114b856730cd0346e60088c16e Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Sun, 16 Mar 2025 15:21:21 +0800 Subject: [PATCH 18/18] =?UTF-8?q?style:=20=E6=9B=B4=E6=96=B0=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/Tab/Tab.razor.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss index 6dd4c58cffa..0eeeb16514c 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss @@ -598,7 +598,7 @@ } } - .tabs-item-fix { + > .tabs-header .tabs-item-fix { background-color: var(--bb-tabs-header-bg-color); border: none; }