Skip to content

Commit 593a411

Browse files
ArgoZhangArgoZhang
authored
feat(Tab): improve AllowDrag function (#5684)
* refactor: 更新样式 * refactor: 精简代码统一 DOM 结构 * refactor: 更改 DOM 操作节点 * refactor: 精简代码 * refactor: 移除 active 冗余样式 * doc: 更新示例 * refactor: 更新拖动控制逻辑
1 parent 5e0ea8f commit 593a411

File tree

5 files changed

+40
-45
lines changed

5 files changed

+40
-45
lines changed

‎src/BootstrapBlazor.Server/Components/Samples/Tabs.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -437,7 +437,7 @@ private void Navigation()
437437
</DemoBlock>
438438

439439
<DemoBlock Title="@Localizer["TabsChromeStyleTitle"]" Introduction="@Localizer["TabsChromeStyleIntro"]" Name="Chrome">
440-
<Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Chrome">
440+
<Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Chrome" AllowDrag="true">
441441
<TabItem Text="@Localizer["TabItem1Text"]" Icon="fa-solid fa-user">
442442
<div>@Localizer["TabItem1Content"]</div>
443443
</TabItem>
@@ -454,7 +454,7 @@ private void Navigation()
454454
</DemoBlock>
455455

456456
<DemoBlock Title="@Localizer["TabsCapsuleStyleTitle"]" Introduction="@Localizer["TabsCapsuleStyleIntro"]" Name="Capsule">
457-
<Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Capsule">
457+
<Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Capsule" AllowDrag="true">
458458
<TabItem Text="@Localizer["TabItem1Text"]" Icon="fa-solid fa-user">
459459
<div>@Localizer["TabItem1Content"]</div>
460460
</TabItem>

‎src/BootstrapBlazor/Components/Tab/Tab.razor‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,11 @@ else
5151
}
5252
else if (item.IsDisabled)
5353
{
54-
@RenderDisabledHeaderByStyle(item)
54+
@RenderDisabledHeader(item)
5555
}
5656
else
5757
{
58-
@RenderHeaderByStyle(item)
58+
@RenderHeader(item)
5959
}
6060
}
6161
@if (IsCard || IsBorderCard)
@@ -124,7 +124,7 @@ else
124124
@RenderTabItemContent(item)
125125
</CascadingValue>;
126126

127-
RenderFragment RenderChromeDisabledHeader(TabItem item) =>
127+
RenderFragment RenderDisabledHeader(TabItem item) =>
128128
@<div @key="@item" class="@GetItemWrapClassString(item)">
129129
<div role="tab" class="@GetClassString(item)">
130130
@RenderHeaderContent(item)
@@ -136,14 +136,9 @@ else
136136
}
137137
</div>;
138138

139-
RenderFragment RenderDefaultDisabledHeader(TabItem item) =>
140-
@<div @key="item" role="tab" class="@GetClassString(item)">
141-
@RenderHeaderContent(item)
142-
</div>;
143-
144-
RenderFragment RenderChromeHeader(TabItem item) =>
145-
@<div @key="@item" class="@GetItemWrapClassString(item)">
146-
<a href="@item.Url" role="tab" tabindex="-1" class="@GetClassString(item)" @onclick="@(() => OnClickTabItem(item))" @onclick:preventDefault="@(!ClickTabToNavigation)" draggable="@DraggableString">
139+
RenderFragment RenderHeader(TabItem item) =>
140+
@<div @key="@item" class="@GetItemWrapClassString(item)" draggable="@DraggableString">
141+
<a href="@item.Url" role="tab" tabindex="-1" class="@GetClassString(item)" @onclick="@(() => OnClickTabItem(item))" @onclick:preventDefault="@(!ClickTabToNavigation)">
147142
@RenderHeaderContent(item)
148143
</a>
149144
@if (TabStyle == TabStyle.Chrome)
@@ -153,11 +148,6 @@ else
153148
}
154149
</div>;
155150

156-
RenderFragment RenderDefaultHeader(TabItem item) =>
157-
@<a @key="item" href="@item.Url" role="tab" tabindex="-1" class="@GetClassString(item)" @onclick="@(() => OnClickTabItem(item))" @onclick:preventDefault="@(!ClickTabToNavigation)" draggable="@DraggableString">
158-
@RenderHeaderContent(item)
159-
</a>;
160-
161151
RenderFragment RenderHeaderContent(TabItem item) =>
162152
@<div class="tabs-item-body">
163153
@if (!string.IsNullOrEmpty(item.Icon))

‎src/BootstrapBlazor/Components/Tab/Tab.razor.cs‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ public partial class Tab : IHandlerException
2929
.Build();
3030

3131
private string? GetClassString(TabItem item) => CssBuilder.Default("tabs-item")
32-
.AddClass("active", TabStyle == TabStyle.Default && item.IsActive && !item.IsDisabled)
3332
.AddClass("disabled", item.IsDisabled)
3433
.AddClass(item.CssClass)
3534
.AddClass("is-closeable", ShowClose)
@@ -329,7 +328,7 @@ public partial class Tab : IHandlerException
329328

330329
private Placement LastPlacement { get; set; }
331330

332-
private string DraggableString => AllowDrag ? "true" : "false";
331+
private string? DraggableString => AllowDrag ? "true" : null;
333332

334333
/// <summary>
335334
/// <inheritdoc/>
@@ -879,10 +878,6 @@ public async Task DragItemCallback(int originIndex, int currentIndex)
879878

880879
private string? GetIdByTabItem(TabItem item) => (ShowFullScreen && item.ShowFullScreen) ? ComponentIdGenerator.Generate(item) : null;
881880

882-
private RenderFragment RenderDisabledHeaderByStyle(TabItem item) => TabStyle == TabStyle.Default ? RenderDefaultDisabledHeader(item) : RenderChromeDisabledHeader(item);
883-
884-
private RenderFragment RenderHeaderByStyle(TabItem item) => TabStyle == TabStyle.Default ? RenderDefaultHeader(item) : RenderChromeHeader(item);
885-
886881
/// <summary>
887882
/// <inheritdoc/>
888883
/// </summary>

‎src/BootstrapBlazor/Components/Tab/Tab.razor.js‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@ const resize = tab => {
2020
}
2121

2222
const scroll = tab.scroll
23-
const lastItem = [...tabNav.querySelectorAll('.tabs-item')].pop()
23+
const lastItem = [...tabNav.querySelectorAll('.tabs-item-wrap')].pop()
2424
if (lastItem) {
2525
if (tab.vertical) {
2626
const tabHeight = scroll.offsetHeight
2727
let itemHeight = 0
28-
tabNav.querySelectorAll('.tabs-item').forEach(v => {
28+
tabNav.querySelectorAll('.tabs-item-wrap').forEach(v => {
2929
itemHeight += v.offsetHeight
3030
})
3131
if (itemHeight > tabHeight) {
@@ -39,7 +39,7 @@ const resize = tab => {
3939
// Item 总宽度大于 Nav 宽度
4040
const tabWidth = scroll.offsetWidth
4141
let itemWidth = 0
42-
tabNav.querySelectorAll('.tabs-item').forEach(v => {
42+
tabNav.querySelectorAll('.tabs-item-wrap').forEach(v => {
4343
itemWidth += v.offsetWidth
4444
})
4545
if (itemWidth > tabWidth) {
@@ -55,7 +55,7 @@ const resize = tab => {
5555
const active = tab => {
5656
resize(tab)
5757

58-
const activeTab = tab.tabNav.querySelector('.tabs-item.active')
58+
const activeTab = tab.tabNav.querySelector('.tabs-item-wrap.active')
5959
if (activeTab) {
6060
if (tab.vertical) {
6161
const top = getPosition(activeTab).top - getPosition(activeTab.parentNode).top + activeTab.offsetHeight
@@ -103,17 +103,21 @@ const active = tab => {
103103
}
104104

105105
const setDraggable = tab => {
106-
disposeDragItems(tab.dragItems)
106+
disposeDragItems(tab.dragItems);
107+
108+
if (tab.el.querySelector('.tabs-item-wrap[draggable="true"]') === null) {
109+
return;
110+
}
107111

108112
let dragItem = null;
109113
let index = 0
110114

111-
tab.dragItems = [...tab.el.firstChild.querySelectorAll('.tabs-item')]
115+
tab.dragItems = [...tab.el.firstChild.querySelectorAll('.tabs-item-wrap')]
112116
tab.dragItems.forEach(item => {
113117
EventHandler.on(item, 'dragstart', e => {
114118
item.parentNode.classList.add('tab-dragging')
115119
item.classList.add('tab-drag')
116-
tab.dragItems = [...tab.el.firstChild.querySelectorAll('.tabs-item')]
120+
tab.dragItems = [...tab.el.firstChild.querySelectorAll('.tabs-item-wrap')]
117121
index = tab.dragItems.indexOf(item)
118122
dragItem = item
119123
e.dataTransfer.effectAllowed = 'move'

‎src/BootstrapBlazor/Components/Tab/Tab.razor.scss‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,6 @@
226226

227227
.tabs.tabs-card > .tabs-header .tabs-item.active,
228228
.tabs.tabs-border-card > .tabs-header .tabs-item.active {
229-
background-color: var(--bs-body-bg);
230229
border-width: 0 1px 0px 0;
231230
}
232231

@@ -470,21 +469,23 @@
470469
min-height: calc(100% + 2rem);
471470
}
472471

473-
.tab-drag-over {
474-
animation: drag-tab-item 1s linear infinite;
475-
}
472+
.tab-dragging {
473+
.tabs-item-wrap:not(:hover) .tabs-item {
474+
pointer-events: none;
475+
}
476476

477-
.tab-dragging th[draggable] * {
478-
pointer-events: none;
479-
}
477+
.tab-drag-over .tabs-item {
478+
animation: drag-tab-item 1s linear infinite;
479+
}
480480

481-
.tab-drag {
482-
background-color: var(--bs-secondary);
481+
.tab-drag {
482+
background-color: var(--bs-secondary);
483+
}
483484
}
484485

485486
@keyframes drag-tab-item {
486487
50% {
487-
background-color: var(--bs-primary);
488+
background-color: var(--bs-primary) !important;
488489
}
489490
}
490491

@@ -496,10 +497,7 @@
496497
--bb-tabs-item-active-color: var(--bs-body-color);
497498
--bb-tabs-item-hover-color: var(--bs-body-color);
498499
--bb-tabs-item-bg-color: rgba(var(--bs-body-color-rgb), 0.08);
499-
500-
.tabs-nav {
501-
background-color: var(--bb-tabs-header-bg-color);
502-
}
500+
background-color: var(--bb-tabs-header-bg-color);
503501

504502
.tabs-item-fix {
505503
border: none;
@@ -540,6 +538,14 @@
540538
}
541539
}
542540
}
541+
542+
.tab-drag-over .tabs-item {
543+
animation: none;
544+
}
545+
546+
.tab-drag-over .tabs-item .tabs-item-body {
547+
animation: drag-tab-item 1s linear infinite;
548+
}
543549
}
544550

545551
.tabs-chrome > .tabs-header {

0 commit comments

Comments
 (0)