Skip to content

Commit 4182636

Browse files
ArgoZhangArgoZhang
authored
feat(Tab): add navigation hover style (#5718)
* chore: 更新依赖 * doc: 更新文档 * refactor: 更新服务 * chore: 移除 Baidu 语音服务 * revert: 撤销项目依赖更改 * Revert "refactor: 更新服务" This reverts commit 5ceadcd. * Revert "chore: 移除 Baidu 语音服务" This reverts commit 8fa835d. * chore: 更新导出服务 * style: 调整 Chrome 模式下按钮样式 * doc: 增加等宽设置 * revert: 撤销样式更新 * refactor: 增加提示栏 * style: 更新样式 * style: 更新样式 * doc: 更新示例 * test: 更新单元测试 * refactor: 更正方法
1 parent 4d5f9ad commit 4182636

File tree

9 files changed

+127
-67
lines changed

9 files changed

+127
-67
lines changed

‎src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
<PackageReference Include="BootstrapBlazor.Splitting" Version="9.0.2" />
6363
<PackageReference Include="BootstrapBlazor.SvgEditor" Version="9.0.3" />
6464
<PackageReference Include="BootstrapBlazor.SummerNote" Version="9.0.3" />
65-
<PackageReference Include="BootstrapBlazor.TableExport" Version="9.2.1" />
65+
<PackageReference Include="BootstrapBlazor.TableExport" Version="9.2.2" />
6666
<PackageReference Include="BootstrapBlazor.Topology" Version="9.0.0" />
6767
<PackageReference Include="BootstrapBlazor.UniverIcon" Version="9.0.1" />
6868
<PackageReference Include="BootstrapBlazor.UniverSheet" Version="9.0.0-beta09" />

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

Lines changed: 5 additions & 5 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" AllowDrag="true" ShowToolbar="true">
440+
<Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Chrome" AllowDrag="true" ShowToolbar="true" ShowExtendButtons="true">
441441
<TabItem Text="@Localizer["TabItem1Text"]" Icon="fa-solid fa-user">
442442
<div>@Localizer["TabItem1Content"]</div>
443443
</TabItem>
@@ -514,11 +514,11 @@ private void Navigation()
514514
</TabItem>
515515
</Tab>
516516
<ContextMenu>
517-
<ContextMenuItem Icon="fa-solid fa-rotate-right" Text="@Localizer["ContextRefresh"]" OnClick="OnRefrsh"></ContextMenuItem>
517+
<ContextMenuItem Icon="fa-fw fa-solid fa-rotate-right" Text="@Localizer["ContextRefresh"]" OnClick="OnRefrsh"></ContextMenuItem>
518518
<ContextMenuDivider></ContextMenuDivider>
519-
<ContextMenuItem Icon="fa-solid fa-xmark" Text="@Localizer["ContextClose"]" OnClick="OnClose"></ContextMenuItem>
520-
<ContextMenuItem Icon="fa-solid fa-left-right" Text="@Localizer["ContextCloseOther"]" OnClick="OnCloseOther"></ContextMenuItem>
521-
<ContextMenuItem Icon="fa-solid fa-arrows-left-right-to-line" Text="@Localizer["ContextCloseAll"]" OnClick="OnCloseAll"></ContextMenuItem>
519+
<ContextMenuItem Icon="fa-fw fa-solid fa-xmark" Text="@Localizer["ContextClose"]" OnClick="OnClose"></ContextMenuItem>
520+
<ContextMenuItem Icon="fa-fw fa-solid fa-left-right" Text="@Localizer["ContextCloseOther"]" OnClick="OnCloseOther"></ContextMenuItem>
521+
<ContextMenuItem Icon="fa-fw fa-solid fa-arrows-left-right-to-line" Text="@Localizer["ContextCloseAll"]" OnClick="OnCloseAll"></ContextMenuItem>
522522
</ContextMenu>
523523
</ContextMenuZone>
524524
</DemoBlock>

‎src/BootstrapBlazor.Server/Locales/en-US.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5033,7 +5033,7 @@
50335033
"ShowUnsetGroupItemsOnTopAttr": "Whether ungrouped edits are rendered at the beginning",
50345034
"ShowSkeletonAttr": "Whether to display skeleton screen when first render",
50355035
"ShowLoadingInFirstRenderAttr": "Whether to display the loading animation when first render",
5036-
"ShowColumnListAttr": "Show columnshow/hide control buttons",
5036+
"ShowColumnListAttr": "Show Column show/hide control buttons",
50375037
"OnColumnVisibleChangedAttr": "Trigger this callback when switch show/hide column in the list",
50385038
"ShowEmptyAttr": "Show no data prompts",
50395039
"ShowToastAfterSaveOrDeleteModelAttr": "Do you show a toast prompt box after a save/delete failure",

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

Lines changed: 62 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,13 @@ else
1919
}
2020
@if (ShowNavigatorButtons)
2121
{
22-
<div class="nav-link-bar left" @onclick="@ClickPrevTab"><i class="@PreviousIcon"></i></div>
22+
<div class="nav-link-bar left">
23+
<Tooltip Title="@PrevTabNavLinkTooltipText" Placement="Placement.Bottom" Trigger="hover">
24+
<div class="nav-link-bar-button" @onclick="@ClickPrevTab">
25+
<i class="@PreviousIcon"></i>
26+
</div>
27+
</Tooltip>
28+
</div>
2329
}
2430
<div class="tabs-nav-scroll">
2531
<div role="tablist" class="tabs-nav">
@@ -71,57 +77,63 @@ else
7177
}
7278
</div>
7379
</div>
74-
@if (ButtonTemplate != null)
75-
{
76-
<CascadingValue Value="this" IsFixed="true">
80+
<CascadingValue Value="this" IsFixed="true">
81+
@if (ButtonTemplate != null)
82+
{
7783
@ButtonTemplate
78-
</CascadingValue>
79-
}
80-
@if (ShowToolbar)
81-
{
82-
<div class="tabs-nav-toolbar">
83-
@if (ShowRefreshToolbarButton)
84-
{
85-
<TabToolbarButton class="tabs-nav-toolbar-refresh"
86-
Icon="@RefreshToolbarButtonIcon" OnClickAsync="OnRefreshAsync"
87-
TooltipText="@RefreshToolbarTooltipText"></TabToolbarButton>
88-
}
89-
@if (ShowFullscreenToolbarButton)
90-
{
91-
<div class="tabs-nav-toolbar-button tabs-nav-toolbar-fs">
92-
<FullScreenButton TargetId="@Id"
93-
Icon="@FullscreenToolbarButtonIcon"
94-
TooltipText="@FullscreenToolbarTooltipText"
95-
TooltipPlacement="Placement.Bottom" TooltipTrigger="hover"></FullScreenButton>
96-
</div>
97-
}
98-
@if (ToolbarTemplate != null)
99-
{
100-
<CascadingValue Value="this" IsFixed="true">
84+
}
85+
@if (ShowToolbar)
86+
{
87+
<div class="tabs-nav-toolbar">
88+
@if (ShowRefreshToolbarButton)
89+
{
90+
<TabToolbarButton class="tabs-nav-toolbar-refresh"
91+
Icon="@RefreshToolbarButtonIcon" OnClickAsync="OnRefreshAsync"
92+
TooltipText="@RefreshToolbarTooltipText"></TabToolbarButton>
93+
}
94+
@if (ShowFullscreenToolbarButton)
95+
{
96+
<div class="tabs-nav-toolbar-button tabs-nav-toolbar-fs">
97+
<FullScreenButton TargetId="@Id"
98+
Icon="@FullscreenToolbarButtonIcon"
99+
TooltipText="@FullscreenToolbarTooltipText"
100+
TooltipPlacement="Placement.Bottom" TooltipTrigger="hover"></FullScreenButton>
101+
</div>
102+
}
103+
@if (ToolbarTemplate != null)
104+
{
101105
@ToolbarTemplate
102-
</CascadingValue>
103-
}
104-
</div>
105-
}
106-
@if (ShowNavigatorButtons)
107-
{
108-
<div class="nav-link-bar right" @onclick="@ClickNextTab"><i class="@NextIcon"></i></div>
109-
}
110-
@if (ShouldShowExtendButtons())
111-
{
112-
<div class="nav-link-bar dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
113-
<div class="nav-link-close"><i class="@DropdownIcon"></i></div>
114-
</div>
115-
<div class="dropdown-menu dropdown-menu-end shadow">
116-
<div class="dropdown-item" @onclick="@CloseCurrentTab"><span>@CloseCurrentTabText</span></div>
117-
<div class="dropdown-item" @onclick="@OnClickCloseOtherTabs"><span>@CloseOtherTabsText</span></div>
118-
<div class="dropdown-item" @onclick="@OnClickCloseAllTabs"><span>@CloseAllTabsText</span></div>
119-
</div>
120-
}
121-
@if (AfterNavigatorTemplate != null)
122-
{
123-
@AfterNavigatorTemplate
124-
}
106+
}
107+
</div>
108+
}
109+
@if (ShowNavigatorButtons)
110+
{
111+
<div class="nav-link-bar right">
112+
<Tooltip Title="@NextTabNavLinkTooltipText" Placement="Placement.Bottom" Trigger="hover">
113+
<div class="nav-link-bar-button" @onclick="@ClickNextTab">
114+
<i class="@NextIcon"></i>
115+
</div>
116+
</Tooltip>
117+
</div>
118+
}
119+
@if (ShouldShowExtendButtons())
120+
{
121+
<div class="nav-link-bar dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
122+
<Tooltip Title="@CloseTabNavLinkTooltipText" Placement="Placement.Left" Trigger="hover">
123+
<div class="nav-link-bar-button nav-link-close"><i class="@DropdownIcon"></i></div>
124+
</Tooltip>
125+
</div>
126+
<div class="dropdown-menu dropdown-menu-end shadow">
127+
<div class="dropdown-item" @onclick="@CloseCurrentTab"><span>@CloseCurrentTabText</span></div>
128+
<div class="dropdown-item" @onclick="@OnClickCloseOtherTabs"><span>@CloseOtherTabsText</span></div>
129+
<div class="dropdown-item" @onclick="@OnClickCloseAllTabs"><span>@CloseAllTabsText</span></div>
130+
</div>
131+
}
132+
@if (AfterNavigatorTemplate != null)
133+
{
134+
@AfterNavigatorTemplate
135+
}
136+
</CascadingValue>
125137
</div>
126138
</div>
127139
<div class="tabs-body">

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

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,6 @@ public partial class Tab : IHandlerException
167167
/// 获得/设置 NotFound 标签文本 默认 null NET6.0/7.0 有效
168168
/// </summary>
169169
[Parameter]
170-
[NotNull]
171170
public string? NotFoundTabText { get; set; }
172171

173172
/// <summary>
@@ -205,21 +204,18 @@ public partial class Tab : IHandlerException
205204
/// 获得/设置 关闭当前 TabItem 菜单文本
206205
/// </summary>
207206
[Parameter]
208-
[NotNull]
209207
public string? CloseCurrentTabText { get; set; }
210208

211209
/// <summary>
212210
/// 获得/设置 关闭所有 TabItem 菜单文本
213211
/// </summary>
214212
[Parameter]
215-
[NotNull]
216213
public string? CloseAllTabsText { get; set; }
217214

218215
/// <summary>
219216
/// 获得/设置 关闭其他 TabItem 菜单文本
220217
/// </summary>
221218
[Parameter]
222-
[NotNull]
223219
public string? CloseOtherTabsText { get; set; }
224220

225221
/// <summary>
@@ -345,6 +341,24 @@ public partial class Tab : IHandlerException
345341
[Parameter]
346342
public Func<Task>? OnToolbarRefreshCallback { get; set; }
347343

344+
/// <summary>
345+
/// Gets or sets the previous tab navigation link tooltip text. Default is null.
346+
/// </summary>
347+
[Parameter]
348+
public string? PrevTabNavLinkTooltipText { get; set; }
349+
350+
/// <summary>
351+
/// Gets or sets the next tab navigation link tooltip text. Default is null.
352+
/// </summary>
353+
[Parameter]
354+
public string? NextTabNavLinkTooltipText { get; set; }
355+
356+
/// <summary>
357+
/// Gets or sets the close tab navigation link tooltip text. Default is null.
358+
/// </summary>
359+
[Parameter]
360+
public string? CloseTabNavLinkTooltipText { get; set; }
361+
348362
[CascadingParameter]
349363
private Layout? Layout { get; set; }
350364

@@ -415,6 +429,9 @@ protected override void OnParametersSet()
415429
NotFoundTabText ??= Localizer[nameof(NotFoundTabText)];
416430
RefreshToolbarTooltipText ??= Localizer[nameof(RefreshToolbarTooltipText)];
417431
FullscreenToolbarTooltipText ??= Localizer[nameof(FullscreenToolbarTooltipText)];
432+
PrevTabNavLinkTooltipText ??= Localizer[nameof(PrevTabNavLinkTooltipText)];
433+
NextTabNavLinkTooltipText ??= Localizer[nameof(NextTabNavLinkTooltipText)];
434+
CloseTabNavLinkTooltipText ??= Localizer[nameof(CloseTabNavLinkTooltipText)];
418435

419436
PreviousIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabPreviousIcon);
420437
NextIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabNextIcon);

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -548,9 +548,34 @@
548548
.tab-drag-over .tabs-item .tabs-item-body {
549549
animation: drag-tab-item 1s linear infinite;
550550
}
551+
552+
.nav-link-bar {
553+
padding: 3px 0.5rem;
554+
555+
.nav-link-bar-button {
556+
cursor: pointer;
557+
padding: 0 .75rem;
558+
height: 100%;
559+
display: flex;
560+
align-items: center;
561+
border-radius: var(--bs-border-radius);
562+
563+
&:hover {
564+
background-color: var(--bb-tabs-item-hover-bg-color);
565+
}
566+
}
567+
568+
> [data-bs-toggle="tooltip"] {
569+
height: 100%;
570+
display: flex;
571+
align-items: center;
572+
}
573+
}
551574
}
552575

553576
.tabs-chrome > .tabs-header {
577+
padding: 0 .25rem;
578+
554579
.tabs-item-wrap {
555580
overflow: hidden;
556581
position: relative;

‎src/BootstrapBlazor/Locales/en.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,10 @@
175175
"CloseAllTabsText": "Close All",
176176
"NotFoundTabText": "NotFound",
177177
"RefreshToolbarTooltipText": "Refresh",
178-
"FullscreenToolbarTooltipText": "Fullscreen"
178+
"FullscreenToolbarTooltipText": "Fullscreen",
179+
"PrevTabNavLinkTooltipText": "Prev Tab",
180+
"NextTabNavLinkTooltipText": "Next Tab",
181+
"CloseTabNavLinkTooltipText": "Close"
179182
},
180183
"BootstrapBlazor.Components.MultiFilter": {
181184
"MultiFilterSearchPlaceHolderText": "Please enter ...",

‎src/BootstrapBlazor/Locales/zh.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,10 @@
175175
"CloseAllTabsText": "关闭所有标签",
176176
"NotFoundTabText": "未找到",
177177
"RefreshToolbarTooltipText": "刷新",
178-
"FullscreenToolbarTooltipText": "全屏"
178+
"FullscreenToolbarTooltipText": "全屏",
179+
"PrevTabNavLinkTooltipText": "上一个标签",
180+
"NextTabNavLinkTooltipText": "下一个标签",
181+
"CloseTabNavLinkTooltipText": "关闭"
179182
},
180183
"BootstrapBlazor.Components.MultiFilter": {
181184
"MultiFilterSearchPlaceHolderText": "请输入 ...",

‎test/UnitTest/Components/TabTest.cs‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -226,14 +226,14 @@ public void ClickTab_Ok()
226226
Assert.True(clicked);
227227

228228
// Click Prev
229-
var button = cut.Find(".nav-link-bar.left");
229+
var button = cut.Find(".nav-link-bar.left .nav-link-bar-button");
230230
button.Click();
231231
button.Click();
232232
button.Click();
233233
Assert.Equal("Tab1-Content", cut.Find(".tabs-body .d-none").InnerHtml);
234234

235235
// Click Next
236-
button = cut.Find(".nav-link-bar.right");
236+
button = cut.Find(".nav-link-bar.right .nav-link-bar-button");
237237
button.Click();
238238
button.Click();
239239
button.Click();
@@ -284,11 +284,11 @@ public void ClickTabToNavigation_True()
284284
cut.InvokeAsync(() => cut.Instance.AddTab("/Cat", null!));
285285

286286
// Click Prev
287-
var button = cut.Find(".nav-link-bar.left");
287+
var button = cut.Find(".nav-link-bar.left .nav-link-bar-button");
288288
button.Click();
289289

290290
// Click Next
291-
button = cut.Find(".nav-link-bar.right");
291+
button = cut.Find(".nav-link-bar.right .nav-link-bar-button");
292292
button.Click();
293293

294294
button = cut.Find(".tabs-item-close");

0 commit comments

Comments
 (0)