Skip to content

Commit 552dd1d

Browse files
ArgoZhangArgoZhang
authored
feat(Tab): compatible with devui style (#5757)
* refactor: 更新 tabs-item 垂直布局样式 * refactor: tab 高度使用变量 * refactor: 更新 hr 样式 * refactor: 参数变量化 * style: 重新设计 Close 按钮样式 * refactor: 更新 HeaderTemplate 示例 * refactor: 防止 Close 折行 * style: 调整变量值 * refactor: 适配紧凑模式 * chore: bump version 9.5.1
1 parent db4c868 commit 552dd1d

File tree

6 files changed

+102
-73
lines changed

6 files changed

+102
-73
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -384,7 +384,7 @@ private void Navigation()
384384
<Tab IsBorderCard="true" @ref="TabSetTemplate">
385385
<TabItem>
386386
<HeaderTemplate>
387-
<div class="@GetClassString(context)" @onclick="() => OnClickTabItem(context)">
387+
<div class="tabs-item" @onclick="() => OnClickTabItem(context)">
388388
<i class="fa-solid fa-tv"></i>
389389
<span class="mx-2">@Localizer["BlockHeaderTemplateHeaderText"]</span>
390390
<Badge Color="Color.Danger" style="position: absolute; right: 2px; top: 2px;">9</Badge>

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -150,10 +150,6 @@ private Task AddTab()
150150
return Task.CompletedTask;
151151
}
152152

153-
private static string? GetClassString(TabItem tabItem) => CssBuilder.Default("tabs-item")
154-
.AddClass("active", tabItem.IsActive)
155-
.Build();
156-
157153
private async Task OnClickTabItem(TabItem tabItem)
158154
{
159155
TabSetTemplate.ActiveTab(tabItem);

‎src/BootstrapBlazor.Server/wwwroot/css/devui.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@ code {
2222
--bb-code-line-height: 1.5;
2323
}
2424

25+
hr {
26+
margin: .5rem 0;
27+
}
28+
2529
pre code.hljs {
2630
padding: var(--bb-space);
2731
}
@@ -159,5 +163,18 @@ pre code.hljs {
159163

160164
.tabs {
161165
--bb-tabs-item-height: 29px;
166+
--bb-tabs-item-padding: 0 .5rem;
162167
--bb-tabs-body-padding: .5rem;
168+
--bb-tabs-item-close-button-height: 16px;
169+
}
170+
171+
.tabs-chrome > .tabs-header,
172+
.tabs-capsule > .tabs-header {
173+
--bb-tabs-item-body-padding: 2px 8px;
174+
--bb-tabs-header-height: 26px;
175+
}
176+
177+
.tabs-chrome {
178+
--bb-tabs-item-wrap-padding-x: 0.5rem;
179+
--bb-tabs-item-body-margin-bottom: 2px;
163180
}

‎src/BootstrapBlazor/BootstrapBlazor.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<Project Sdk="Microsoft.NET.Sdk.Razor">
22

33
<PropertyGroup>
4-
<Version>9.5.0</Version>
4+
<Version>9.5.1</Version>
55
</PropertyGroup>
66

77
<ItemGroup>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,9 @@ else
8686
{
8787
@if (item.HeaderTemplate != null)
8888
{
89-
@item.HeaderTemplate(item)
89+
<div @key="@item" class="@GetItemWrapClassString(item)" draggable="@DraggableString">
90+
@item.HeaderTemplate(item)
91+
</div>
9092
}
9193
else if (item.IsDisabled)
9294
{

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

Lines changed: 80 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
--bb-tabs-bar-bg: #{$bb-tabs-bar-bg};
1111
--bb-tabs-body-padding: #{$bb-tabs-body-padding};
1212
--bb-tabs-header-vertical-min-width: #{$bb-tabs-header-vertical-min-width};
13+
--bb-tabs-item-close-button-height: 21px;
1314
display: flex;
1415
flex-flow: column;
1516

@@ -140,6 +141,10 @@
140141
list-style: none;
141142
}
142143

144+
.tabs-item-wrap.active .tabs-item {
145+
color: var(--bb-tabs-item-active-color);
146+
}
147+
143148
.tabs-item {
144149
padding: var(--bb-tabs-item-padding);
145150
height: var(--bb-tabs-item-height);
@@ -151,48 +156,46 @@
151156
align-items: center;
152157
position: relative;
153158
transition: color .3s cubic-bezier(.645,.045,.355,1), padding .3s cubic-bezier(.645,.045,.355,1), transform .3s linear;
154-
}
155159

156-
.tabs-item.active {
157-
color: var(--bb-tabs-item-active-color);
158-
}
159-
160-
.tabs-item:not(.disabled):hover {
161-
color: var(--bb-tabs-item-hover-color);
162-
}
160+
&.disabled {
161+
opacity: var(--bb-tabs-item-disabled-opacity);
162+
}
163163

164-
.tabs-item.disabled {
165-
opacity: var(--bb-tabs-item-disabled-opacity);
166-
}
164+
&:not(.disabled):hover {
165+
color: var(--bb-tabs-item-hover-color);
166+
}
167167

168-
.tabs-item .tabs-item-text {
169-
padding: 0 0.25rem;
170-
pointer-events: none;
171-
}
168+
&:hover {
169+
.tabs-item-close {
170+
visibility: visible;
171+
}
172+
}
172173

173-
.tabs-item.is-closeable .tabs-item-text {
174-
padding-right: 1rem;
175-
}
174+
.tabs-item-body {
175+
display: flex;
176+
align-items: center;
177+
flex-wrap: nowrap;
178+
}
176179

177-
.tabs-item:hover .tabs-item-close {
178-
display: flex;
179-
}
180+
.tabs-item-text {
181+
padding: 0 0.25rem;
182+
pointer-events: none;
183+
user-select: none;
184+
}
180185

181-
.tabs-item .tabs-item-close {
182-
width: 21px;
183-
height: 21px;
184-
display: none;
185-
position: absolute;
186-
right: .5rem;
187-
top: 10px;
188-
justify-content: center;
189-
align-items: center;
190-
transition: all .3s linear;
191-
}
186+
.tabs-item-close {
187+
width: var(--bb-tabs-item-close-button-height);
188+
height: var(--bb-tabs-item-close-button-height);
189+
visibility: hidden;
190+
display: flex;
191+
justify-content: center;
192+
align-items: center;
192193

193-
.tabs-item .tabs-item-close:hover {
194-
background-color: #e4e7ed;
195-
border-radius: var(--bs-border-radius);
194+
&:hover {
195+
background-color: #e4e7ed;
196+
border-radius: var(--bs-border-radius);
197+
}
198+
}
196199
}
197200

198201
.tabs .tabs-body {
@@ -224,8 +227,8 @@
224227
border-width: 0 1px 1px 0;
225228
}
226229

227-
.tabs.tabs-card > .tabs-header .tabs-item.active,
228-
.tabs.tabs-border-card > .tabs-header .tabs-item.active {
230+
.tabs.tabs-card > .tabs-header .tabs-item-wrap.active .tabs-item,
231+
.tabs.tabs-border-card > .tabs-header .tabs-item-wrap.active .tabs-item {
229232
border-width: 0 1px 0px 0;
230233
}
231234

@@ -335,8 +338,8 @@
335338
border-width: 1px 1px 0 0;
336339
}
337340

338-
.tabs.tabs-card.tabs-bottom > .tabs-header .tabs-item.active,
339-
.tabs.tabs-border-card.tabs-bottom > .tabs-header .tabs-item.active {
341+
.tabs.tabs-card.tabs-bottom > .tabs-header .tabs-item-wrap.active .tabs-item,
342+
.tabs.tabs-border-card.tabs-bottom > .tabs-header .tabs-item-wrap.active .tabs-item {
340343
border-width: 0 1px 0 0;
341344
}
342345

@@ -394,7 +397,7 @@
394397
justify-content: flex-end;
395398
}
396399

397-
.tabs.tabs-vertical > .tabs-header .tabs-item:last-child {
400+
.tabs.tabs-vertical > .tabs-header .tabs-item-wrap:last-child .tabs-item {
398401
border-width: 0 1px 0 0;
399402
}
400403

@@ -407,13 +410,13 @@
407410
justify-content: flex-start;
408411
}
409412

410-
.tabs.tabs-vertical.tabs-card > .tabs-header .tabs-item.active,
411-
.tabs.tabs-vertical.tabs-border-card > .tabs-header .tabs-item.active {
413+
.tabs.tabs-vertical.tabs-card > .tabs-header .tabs-item-wrap.active .tabs-item,
414+
.tabs.tabs-vertical.tabs-border-card > .tabs-header .tabs-item-wrap.active .tabs-item {
412415
border-width: 0 0 1px 0;
413416
}
414417

415-
.tabs.tabs-vertical.tabs-card > .tabs-header .tabs-item:last-child.active,
416-
.tabs.tabs-vertical.tabs-border-card > .tabs-header .tabs-item:last-child.active {
418+
.tabs.tabs-vertical.tabs-card > .tabs-header .tabs-item-wrap:last-child.active .tabs-item,
419+
.tabs.tabs-vertical.tabs-border-card > .tabs-header .tabs-item-wrap:last-child.active .tabs-item {
417420
border-width: 0;
418421
}
419422

@@ -422,13 +425,13 @@
422425
border-width: 0 0 1px 1px;
423426
}
424427

425-
.tabs.tabs-card.tabs-right > .tabs-header .tabs-item.active,
426-
.tabs.tabs-border-card.tabs-right > .tabs-header .tabs-item.active {
428+
.tabs.tabs-card.tabs-right > .tabs-header .tabs-item-wrap.active .tabs-item,
429+
.tabs.tabs-border-card.tabs-right > .tabs-header .tabs-item-wrap.active .tabs-item {
427430
border-width: 0 0 1px 0;
428431
}
429432

430-
.tabs.tabs-card.tabs-right > .tabs-header .tabs-item:last-child.active,
431-
.tabs.tabs-border-card.tabs-right > .tabs-header .tabs-item:last-child.active {
433+
.tabs.tabs-card.tabs-right > .tabs-header .tabs-item-wrap:last-child.active .tabs-item,
434+
.tabs.tabs-border-card.tabs-right > .tabs-header .tabs-item-wrap:last-child.active .tabs-item {
432435
border-width: 0;
433436
}
434437

@@ -486,12 +489,16 @@
486489

487490
.tabs-chrome > .tabs-header,
488491
.tabs-capsule > .tabs-header {
492+
--bb-tabs-header-height: 36px;
489493
--bb-tabs-header-bg-color: var(--bs-border-color);
494+
--bb-tabs-item-body-border-radius: 14.5px;
495+
--bb-tabs-item-body-padding: 4px 10px;
490496
--bb-tabs-item-hover-bg-color: rgba(var(--bs-body-color-rgb), 0.1);
491497
--bb-tabs-item-active-bg-color: var(--bs-body-bg);
492498
--bb-tabs-item-active-color: var(--bs-body-color);
493499
--bb-tabs-item-hover-color: var(--bs-body-color);
494500
--bb-tabs-item-bg-color: rgba(var(--bs-body-color-rgb), 0.08);
501+
--bb-tabs-item-text-padding: 0 .5rem;
495502
background-color: var(--bb-tabs-header-bg-color);
496503

497504
.tabs-item-fix {
@@ -504,7 +511,7 @@
504511
&:hover {
505512
background-color: var(--bb-tabs-item-hover-bg-color);
506513
}
507-
}
514+
}
508515
}
509516

510517
.btn-fs {
@@ -513,21 +520,19 @@
513520

514521
.tabs-item {
515522
.tabs-item-body {
516-
padding: 4px 10px;
523+
padding: var(--bb-tabs-item-body-padding);
517524
display: flex;
518525
align-items: center;
519526
flex-wrap: nowrap;
520-
border-radius: 14.5px;
527+
border-radius: var(--bb-tabs-item-body-border-radius);
521528

522529
.tabs-item-text {
523-
padding: 0 .5rem;
530+
padding: var(--bb-tabs-item-text-padding);
524531
}
525532

526533
.tabs-item-close {
527534
display: flex;
528535
position: unset;
529-
width: 21px;
530-
height: 21px;
531536
border-radius: 50%;
532537
}
533538
}
@@ -566,16 +571,22 @@
566571
}
567572
}
568573

574+
.tabs-chrome {
575+
--bb-tabs-header-padding: 0 0.25rem;
576+
--bb-tabs-item-wrap-padding-x: 1rem;
577+
--bb-tabs-item-body-margin-bottom: 4px;
578+
}
579+
569580
.tabs-chrome > .tabs-header {
570-
padding: 0 .25rem;
581+
padding: var(--bb-tabs-header-padding);
571582

572583
.tabs-item-wrap {
573584
overflow: hidden;
574585
position: relative;
575586
display: flex;
576587
align-items: flex-end;
577588
flex-shrink: 0;
578-
padding: 0 1rem;
589+
padding: 0 var(--bb-tabs-item-wrap-padding-x);
579590

580591
&.active {
581592
z-index: 1;
@@ -590,7 +601,7 @@
590601
}
591602

592603
&:not(:first-child) {
593-
margin-left: -2rem;
604+
margin-left: calc(0px - 2 * var(--bb-tabs-item-wrap-padding-x));
594605
}
595606

596607
&:not(.active) {
@@ -607,11 +618,14 @@
607618
}
608619
}
609620
}
621+
}
610622

611-
&:hover + .tabs-item-wrap {
623+
&.active,
624+
&:hover {
625+
+ .tabs-item-wrap {
612626
.tabs-item {
613627
&:before {
614-
content: none;
628+
content: none !important;
615629
}
616630
}
617631
}
@@ -621,16 +635,16 @@
621635
border: none !important;
622636
border-top-left-radius: 10px;
623637
border-top-right-radius: 10px;
624-
height: 36px !important;
638+
height: var(--bb-tabs-header-height) !important;
625639

626640
.tabs-item-body {
627-
margin-bottom: 4px;
641+
margin-bottom: var(--bb-tabs-item-body-margin-bottom);
628642
}
629643
}
630644

631645
.tab-corner {
632-
height: 2rem;
633-
width: 2rem;
646+
height: calc(2 * var(--bb-tabs-item-wrap-padding-x));
647+
width: calc(2 * var(--bb-tabs-item-wrap-padding-x));
634648
display: inline-flex;
635649
justify-content: center;
636650
align-items: center;
@@ -647,7 +661,7 @@
647661

648662
.tab-corner-left {
649663
bottom: 0;
650-
left: -1rem;
664+
left: calc(0px - var(--bb-tabs-item-wrap-padding-x));
651665

652666
&::after {
653667
border-bottom-right-radius: 50%;
@@ -656,7 +670,7 @@
656670

657671
.tab-corner-right {
658672
bottom: 0;
659-
right: -1rem;
673+
right: calc(0px - var(--bb-tabs-item-wrap-padding-x));
660674

661675
&::after {
662676
border-bottom-left-radius: 50%;
@@ -667,7 +681,7 @@
667681

668682
.tabs-capsule > .tabs-header {
669683
.tabs-item-wrap {
670-
margin-left: .5rem;
684+
margin-left: calc(var(--bb-tabs-item-wrap-padding-x) / 2);
671685

672686
&.active {
673687
.tabs-item {

0 commit comments

Comments
 (0)