From 38838229f7170a3d891603682798f2bc50962065 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Fri, 21 Mar 2025 22:55:19 +0800 Subject: [PATCH 1/7] =?UTF-8?q?refactor:=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 | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss index 172ccf2ac73..f71fade2e0b 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss @@ -496,10 +496,7 @@ --bb-tabs-item-active-color: var(--bs-body-color); --bb-tabs-item-hover-color: var(--bs-body-color); --bb-tabs-item-bg-color: rgba(var(--bs-body-color-rgb), 0.08); - - .tabs-nav { - background-color: var(--bb-tabs-header-bg-color); - } + background-color: var(--bb-tabs-header-bg-color); .tabs-item-fix { border: none; From 775f382f5a28ba7bd588c3f6fd4595be8b565d7f Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Fri, 21 Mar 2025 22:55:39 +0800 Subject: [PATCH 2/7] =?UTF-8?q?refactor:=20=E7=B2=BE=E7=AE=80=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E7=BB=9F=E4=B8=80=20DOM=20=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/Tab/Tab.razor | 18 ++++-------------- .../Components/Tab/Tab.razor.cs | 4 ---- 2 files changed, 4 insertions(+), 18 deletions(-) diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor b/src/BootstrapBlazor/Components/Tab/Tab.razor index 5b27a848824..bbc3f98f661 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor @@ -51,11 +51,11 @@ else } else if (item.IsDisabled) { - @RenderDisabledHeaderByStyle(item) + @RenderDisabledHeader(item) } else { - @RenderHeaderByStyle(item) + @RenderHeader(item) } } @if (IsCard || IsBorderCard) @@ -124,7 +124,7 @@ else @RenderTabItemContent(item) ; - RenderFragment RenderChromeDisabledHeader(TabItem item) => + RenderFragment RenderDisabledHeader(TabItem item) => @
; - RenderFragment RenderDefaultDisabledHeader(TabItem item) => - @; - - RenderFragment RenderChromeHeader(TabItem item) => + RenderFragment RenderHeader(TabItem item) => @
@RenderHeaderContent(item) @@ -153,11 +148,6 @@ else }
; - RenderFragment RenderDefaultHeader(TabItem item) => - @ - @RenderHeaderContent(item) - ; - RenderFragment RenderHeaderContent(TabItem item) => @
@if (!string.IsNullOrEmpty(item.Icon)) diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs index 700f5d64ceb..9c5c9b1ea71 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs @@ -879,10 +879,6 @@ 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) => TabStyle == TabStyle.Default ? RenderDefaultDisabledHeader(item) : RenderChromeDisabledHeader(item); - - private RenderFragment RenderHeaderByStyle(TabItem item) => TabStyle == TabStyle.Default ? RenderDefaultHeader(item) : RenderChromeHeader(item); - /// /// /// From 4d7a8e1a33ce4fd60a2d4784e099b0878e8326e1 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Fri, 21 Mar 2025 22:55:54 +0800 Subject: [PATCH 3/7] =?UTF-8?q?refactor:=20=E6=9B=B4=E6=94=B9=20DOM=20?= =?UTF-8?q?=E6=93=8D=E4=BD=9C=E8=8A=82=E7=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/Tab/Tab.razor.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.js b/src/BootstrapBlazor/Components/Tab/Tab.razor.js index 6e4c563095c..2954dfe0d92 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.js +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.js @@ -20,12 +20,12 @@ const resize = tab => { } const scroll = tab.scroll - const lastItem = [...tabNav.querySelectorAll('.tabs-item')].pop() + const lastItem = [...tabNav.querySelectorAll('.tabs-item-wrap')].pop() if (lastItem) { if (tab.vertical) { const tabHeight = scroll.offsetHeight let itemHeight = 0 - tabNav.querySelectorAll('.tabs-item').forEach(v => { + tabNav.querySelectorAll('.tabs-item-wrap').forEach(v => { itemHeight += v.offsetHeight }) if (itemHeight > tabHeight) { @@ -39,7 +39,7 @@ const resize = tab => { // Item 总宽度大于 Nav 宽度 const tabWidth = scroll.offsetWidth let itemWidth = 0 - tabNav.querySelectorAll('.tabs-item').forEach(v => { + tabNav.querySelectorAll('.tabs-item-wrap').forEach(v => { itemWidth += v.offsetWidth }) if (itemWidth > tabWidth) { @@ -55,7 +55,7 @@ const resize = tab => { const active = tab => { resize(tab) - const activeTab = tab.tabNav.querySelector('.tabs-item.active') + const activeTab = tab.tabNav.querySelector('.tabs-item-wrap.active') if (activeTab) { if (tab.vertical) { const top = getPosition(activeTab).top - getPosition(activeTab.parentNode).top + activeTab.offsetHeight @@ -108,12 +108,12 @@ const setDraggable = tab => { let dragItem = null; let index = 0 - tab.dragItems = [...tab.el.firstChild.querySelectorAll('.tabs-item')] + tab.dragItems = [...tab.el.firstChild.querySelectorAll('.tabs-item-wrap')] tab.dragItems.forEach(item => { EventHandler.on(item, 'dragstart', e => { item.parentNode.classList.add('tab-dragging') item.classList.add('tab-drag') - tab.dragItems = [...tab.el.firstChild.querySelectorAll('.tabs-item')] + tab.dragItems = [...tab.el.firstChild.querySelectorAll('.tabs-item-wrap')] index = tab.dragItems.indexOf(item) dragItem = item e.dataTransfer.effectAllowed = 'move' From ba77dbf2000c2a936b402ee38cebdcaf6c2c1bf9 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Fri, 21 Mar 2025 23:22:59 +0800 Subject: [PATCH 4/7] =?UTF-8?q?refactor:=20=E7=B2=BE=E7=AE=80=E4=BB=A3?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/Tab/Tab.razor.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs index 9c5c9b1ea71..3aa283abcb3 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs @@ -329,7 +329,7 @@ public partial class Tab : IHandlerException private Placement LastPlacement { get; set; } - private string DraggableString => AllowDrag ? "true" : "false"; + private string? DraggableString => AllowDrag ? "true" : null; /// /// From 6051f9b4cd417fc0d7573975ac964420be4a0c03 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Fri, 21 Mar 2025 23:49:53 +0800 Subject: [PATCH 5/7] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4=20active=20?= =?UTF-8?q?=E5=86=97=E4=BD=99=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 | 4 +-- .../Components/Tab/Tab.razor.cs | 1 - .../Components/Tab/Tab.razor.scss | 29 ++++++++++++------- 3 files changed, 21 insertions(+), 13 deletions(-) diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor b/src/BootstrapBlazor/Components/Tab/Tab.razor index bbc3f98f661..8d35f24b3a6 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor @@ -137,8 +137,8 @@ else
; RenderFragment RenderHeader(TabItem item) => - @
- + @
+ @RenderHeaderContent(item) @if (TabStyle == TabStyle.Chrome) diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs index 3aa283abcb3..231e641607c 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs @@ -29,7 +29,6 @@ public partial class Tab : IHandlerException .Build(); private string? GetClassString(TabItem item) => CssBuilder.Default("tabs-item") - .AddClass("active", TabStyle == TabStyle.Default && 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 f71fade2e0b..35acdabb21a 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss @@ -226,7 +226,6 @@ .tabs.tabs-card > .tabs-header .tabs-item.active, .tabs.tabs-border-card > .tabs-header .tabs-item.active { - background-color: var(--bs-body-bg); border-width: 0 1px 0px 0; } @@ -470,21 +469,23 @@ min-height: calc(100% + 2rem); } -.tab-drag-over { - animation: drag-tab-item 1s linear infinite; -} +.tab-dragging { + .tabs-item-wrap:not(:hover) .tabs-item { + pointer-events: none; + } -.tab-dragging th[draggable] * { - pointer-events: none; -} + .tab-drag-over .tabs-item { + animation: drag-tab-item 1s linear infinite; + } -.tab-drag { - background-color: var(--bs-secondary); + .tab-drag { + background-color: var(--bs-secondary); + } } @keyframes drag-tab-item { 50% { - background-color: var(--bs-primary); + background-color: var(--bs-primary) !important; } } @@ -537,6 +538,14 @@ } } } + + .tab-drag-over .tabs-item { + animation: none; + } + + .tab-drag-over .tabs-item .tabs-item-body { + animation: drag-tab-item 1s linear infinite; + } } .tabs-chrome > .tabs-header { From 5bf7d672220fcb8f87a81e9b15d3039a9d7450ca Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Fri, 21 Mar 2025 23:53:39 +0800 Subject: [PATCH 6/7] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Server/Components/Samples/Tabs.razor | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor b/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor index 8d44d43df3f..be0c0544c1e 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor @@ -437,7 +437,7 @@ private void Navigation() - +
@Localizer["TabItem1Content"]
 @@ -454,7 +454,7 @@ private void Navigation() - +
@Localizer["TabItem1Content"]
 From 88490eb1721524f7e13350151fe2b4c1014d88f3 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Fri, 21 Mar 2025 23:53:51 +0800 Subject: [PATCH 7/7] =?UTF-8?q?refactor:=20=E6=9B=B4=E6=96=B0=E6=8B=96?= =?UTF-8?q?=E5=8A=A8=E6=8E=A7=E5=88=B6=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/Tab/Tab.razor.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.js b/src/BootstrapBlazor/Components/Tab/Tab.razor.js index 2954dfe0d92..fe95d87df5a 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.js +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.js @@ -103,7 +103,11 @@ const active = tab => { } const setDraggable = tab => { - disposeDragItems(tab.dragItems) + disposeDragItems(tab.dragItems); + + if (tab.el.querySelector('.tabs-item-wrap[draggable="true"]') === null) { + return; + } let dragItem = null; let index = 0