Skip to content

feat(Tab): add navigation hover style #5718

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
Mar 26, 2025
Merged

feat(Tab): add navigation hover style #5718

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
b4579eb
chore: 更新依赖
ArgoZhang Mar 25, 2025
c4eac3a
doc: 更新文档
ArgoZhang Mar 25, 2025
5ceadcd
refactor: 更新服务
ArgoZhang Mar 25, 2025
8fa835d
chore: 移除 Baidu 语音服务
ArgoZhang Mar 25, 2025
f7d3c64
revert: 撤销项目依赖更改
ArgoZhang Mar 26, 2025
d9ec27a
Revert "refactor: 更新服务"
ArgoZhang Mar 26, 2025
0c60dfe
Revert "chore: 移除 Baidu 语音服务"
ArgoZhang Mar 26, 2025
16792d0
chore: 更新导出服务
ArgoZhang Mar 26, 2025
eeb838c
style: 调整 Chrome 模式下按钮样式
ArgoZhang Mar 26, 2025
64dfad1
doc: 增加等宽设置
ArgoZhang Mar 26, 2025
134179d
revert: 撤销样式更新
ArgoZhang Mar 26, 2025
bfac177
refactor: 增加提示栏
ArgoZhang Mar 26, 2025
9e5afae
style: 更新样式
ArgoZhang Mar 26, 2025
1b30fc9
style: 更新样式
ArgoZhang Mar 26, 2025
846b7b1
doc: 更新示例
ArgoZhang Mar 26, 2025
f7203f5
test: 更新单元测试
ArgoZhang Mar 26, 2025
63a74d1
refactor: 更正方法
ArgoZhang Mar 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
<PackageReference Include="BootstrapBlazor.Splitting" Version="9.0.2" />
<PackageReference Include="BootstrapBlazor.SvgEditor" Version="9.0.3" />
<PackageReference Include="BootstrapBlazor.SummerNote" Version="9.0.3" />
<PackageReference Include="BootstrapBlazor.TableExport" Version="9.2.1" />
<PackageReference Include="BootstrapBlazor.TableExport" Version="9.2.2" />
<PackageReference Include="BootstrapBlazor.Topology" Version="9.0.0" />
<PackageReference Include="BootstrapBlazor.UniverIcon" Version="9.0.1" />
<PackageReference Include="BootstrapBlazor.UniverSheet" Version="9.0.0-beta09" />
Expand Down
10 changes: 5 additions & 5 deletions src/BootstrapBlazor.Server/Components/Samples/Tabs.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -437,7 +437,7 @@ private void Navigation()
</DemoBlock>

<DemoBlock Title="@Localizer["TabsChromeStyleTitle"]" Introduction="@Localizer["TabsChromeStyleIntro"]" Name="Chrome">
<Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Chrome" AllowDrag="true" ShowToolbar="true">
<Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Chrome" AllowDrag="true" ShowToolbar="true" ShowExtendButtons="true">
<TabItem Text="@Localizer["TabItem1Text"]" Icon="fa-solid fa-user">
<div>@Localizer["TabItem1Content"]</div>
</TabItem>
Expand Down Expand Up @@ -514,11 +514,11 @@ private void Navigation()
</TabItem>
</Tab>
<ContextMenu>
<ContextMenuItem Icon="fa-solid fa-rotate-right" Text="@Localizer["ContextRefresh"]" OnClick="OnRefrsh"></ContextMenuItem>
<ContextMenuItem Icon="fa-fw fa-solid fa-rotate-right" Text="@Localizer["ContextRefresh"]" OnClick="OnRefrsh"></ContextMenuItem>
<ContextMenuDivider></ContextMenuDivider>
<ContextMenuItem Icon="fa-solid fa-xmark" Text="@Localizer["ContextClose"]" OnClick="OnClose"></ContextMenuItem>
<ContextMenuItem Icon="fa-solid fa-left-right" Text="@Localizer["ContextCloseOther"]" OnClick="OnCloseOther"></ContextMenuItem>
<ContextMenuItem Icon="fa-solid fa-arrows-left-right-to-line" Text="@Localizer["ContextCloseAll"]" OnClick="OnCloseAll"></ContextMenuItem>
<ContextMenuItem Icon="fa-fw fa-solid fa-xmark" Text="@Localizer["ContextClose"]" OnClick="OnClose"></ContextMenuItem>
<ContextMenuItem Icon="fa-fw fa-solid fa-left-right" Text="@Localizer["ContextCloseOther"]" OnClick="OnCloseOther"></ContextMenuItem>
<ContextMenuItem Icon="fa-fw fa-solid fa-arrows-left-right-to-line" Text="@Localizer["ContextCloseAll"]" OnClick="OnCloseAll"></ContextMenuItem>
</ContextMenu>
</ContextMenuZone>
</DemoBlock>
Expand Down
2 changes: 1 addition & 1 deletion src/BootstrapBlazor.Server/Locales/en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5033,7 +5033,7 @@
"ShowUnsetGroupItemsOnTopAttr": "Whether ungrouped edits are rendered at the beginning",
"ShowSkeletonAttr": "Whether to display skeleton screen when first render",
"ShowLoadingInFirstRenderAttr": "Whether to display the loading animation when first render",
"ShowColumnListAttr": "Show columnshow/hide control buttons",
"ShowColumnListAttr": "Show Column show/hide control buttons",
"OnColumnVisibleChangedAttr": "Trigger this callback when switch show/hide column in the list",
"ShowEmptyAttr": "Show no data prompts",
"ShowToastAfterSaveOrDeleteModelAttr": "Do you show a toast prompt box after a save/delete failure",
Expand Down
112 changes: 62 additions & 50 deletions src/BootstrapBlazor/Components/Tab/Tab.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,13 @@ else
}
@if (ShowNavigatorButtons)
{
<div class="nav-link-bar left" @onclick="@ClickPrevTab"><i class="@PreviousIcon"></i></div>
<div class="nav-link-bar left">
<Tooltip Title="@PrevTabNavLinkTooltipText" Placement="Placement.Bottom" Trigger="hover">
<div class="nav-link-bar-button" @onclick="@ClickPrevTab">
<i class="@PreviousIcon"></i>
</div>
</Tooltip>
</div>
}
<div class="tabs-nav-scroll">
<div role="tablist" class="tabs-nav">
Expand Down Expand Up @@ -71,57 +77,63 @@ else
}
</div>
</div>
@if (ButtonTemplate != null)
{
<CascadingValue Value="this" IsFixed="true">
<CascadingValue Value="this" IsFixed="true">
@if (ButtonTemplate != null)
{
@ButtonTemplate
</CascadingValue>
}
@if (ShowToolbar)
{
<div class="tabs-nav-toolbar">
@if (ShowRefreshToolbarButton)
{
<TabToolbarButton class="tabs-nav-toolbar-refresh"
Icon="@RefreshToolbarButtonIcon" OnClickAsync="OnRefreshAsync"
TooltipText="@RefreshToolbarTooltipText"></TabToolbarButton>
}
@if (ShowFullscreenToolbarButton)
{
<div class="tabs-nav-toolbar-button tabs-nav-toolbar-fs">
<FullScreenButton TargetId="@Id"
Icon="@FullscreenToolbarButtonIcon"
TooltipText="@FullscreenToolbarTooltipText"
TooltipPlacement="Placement.Bottom" TooltipTrigger="hover"></FullScreenButton>
</div>
}
@if (ToolbarTemplate != null)
{
<CascadingValue Value="this" IsFixed="true">
}
@if (ShowToolbar)
{
<div class="tabs-nav-toolbar">
@if (ShowRefreshToolbarButton)
{
<TabToolbarButton class="tabs-nav-toolbar-refresh"
Icon="@RefreshToolbarButtonIcon" OnClickAsync="OnRefreshAsync"
TooltipText="@RefreshToolbarTooltipText"></TabToolbarButton>
}
@if (ShowFullscreenToolbarButton)
{
<div class="tabs-nav-toolbar-button tabs-nav-toolbar-fs">
<FullScreenButton TargetId="@Id"
Icon="@FullscreenToolbarButtonIcon"
TooltipText="@FullscreenToolbarTooltipText"
TooltipPlacement="Placement.Bottom" TooltipTrigger="hover"></FullScreenButton>
</div>
}
@if (ToolbarTemplate != null)
{
@ToolbarTemplate
</CascadingValue>
}
</div>
}
@if (ShowNavigatorButtons)
{
<div class="nav-link-bar right" @onclick="@ClickNextTab"><i class="@NextIcon"></i></div>
}
@if (ShouldShowExtendButtons())
{
<div class="nav-link-bar dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="nav-link-close"><i class="@DropdownIcon"></i></div>
</div>
<div class="dropdown-menu dropdown-menu-end shadow">
<div class="dropdown-item" @onclick="@CloseCurrentTab"><span>@CloseCurrentTabText</span></div>
<div class="dropdown-item" @onclick="@OnClickCloseOtherTabs"><span>@CloseOtherTabsText</span></div>
<div class="dropdown-item" @onclick="@OnClickCloseAllTabs"><span>@CloseAllTabsText</span></div>
</div>
}
@if (AfterNavigatorTemplate != null)
{
@AfterNavigatorTemplate
}
}
</div>
}
@if (ShowNavigatorButtons)
{
<div class="nav-link-bar right">
<Tooltip Title="@NextTabNavLinkTooltipText" Placement="Placement.Bottom" Trigger="hover">
<div class="nav-link-bar-button" @onclick="@ClickNextTab">
<i class="@NextIcon"></i>
</div>
</Tooltip>
</div>
}
@if (ShouldShowExtendButtons())
{
<div class="nav-link-bar dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<Tooltip Title="@CloseTabNavLinkTooltipText" Placement="Placement.Left" Trigger="hover">
<div class="nav-link-bar-button nav-link-close"><i class="@DropdownIcon"></i></div>
</Tooltip>
</div>
<div class="dropdown-menu dropdown-menu-end shadow">
<div class="dropdown-item" @onclick="@CloseCurrentTab"><span>@CloseCurrentTabText</span></div>
<div class="dropdown-item" @onclick="@OnClickCloseOtherTabs"><span>@CloseOtherTabsText</span></div>
<div class="dropdown-item" @onclick="@OnClickCloseAllTabs"><span>@CloseAllTabsText</span></div>
</div>
}
@if (AfterNavigatorTemplate != null)
{
@AfterNavigatorTemplate
}
</CascadingValue>
</div>
</div>
<div class="tabs-body">
Expand Down
25 changes: 21 additions & 4 deletions src/BootstrapBlazor/Components/Tab/Tab.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,6 @@ public partial class Tab : IHandlerException
/// 获得/设置 NotFound 标签文本 默认 null NET6.0/7.0 有效
/// </summary>
[Parameter]
[NotNull]
public string? NotFoundTabText { get; set; }

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

/// <summary>
/// 获得/设置 关闭所有 TabItem 菜单文本
/// </summary>
[Parameter]
[NotNull]
public string? CloseAllTabsText { get; set; }

/// <summary>
/// 获得/设置 关闭其他 TabItem 菜单文本
/// </summary>
[Parameter]
[NotNull]
public string? CloseOtherTabsText { get; set; }

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

/// <summary>
/// Gets or sets the previous tab navigation link tooltip text. Default is null.
/// </summary>
[Parameter]
public string? PrevTabNavLinkTooltipText { get; set; }

/// <summary>
/// Gets or sets the next tab navigation link tooltip text. Default is null.
/// </summary>
[Parameter]
public string? NextTabNavLinkTooltipText { get; set; }

/// <summary>
/// Gets or sets the close tab navigation link tooltip text. Default is null.
/// </summary>
[Parameter]
public string? CloseTabNavLinkTooltipText { get; set; }

[CascadingParameter]
private Layout? Layout { get; set; }

Expand Down Expand Up @@ -415,6 +429,9 @@ protected override void OnParametersSet()
NotFoundTabText ??= Localizer[nameof(NotFoundTabText)];
RefreshToolbarTooltipText ??= Localizer[nameof(RefreshToolbarTooltipText)];
FullscreenToolbarTooltipText ??= Localizer[nameof(FullscreenToolbarTooltipText)];
PrevTabNavLinkTooltipText ??= Localizer[nameof(PrevTabNavLinkTooltipText)];
NextTabNavLinkTooltipText ??= Localizer[nameof(NextTabNavLinkTooltipText)];
CloseTabNavLinkTooltipText ??= Localizer[nameof(CloseTabNavLinkTooltipText)];

PreviousIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabPreviousIcon);
NextIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabNextIcon);
Expand Down
25 changes: 25 additions & 0 deletions src/BootstrapBlazor/Components/Tab/Tab.razor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -548,9 +548,34 @@
.tab-drag-over .tabs-item .tabs-item-body {
animation: drag-tab-item 1s linear infinite;
}

.nav-link-bar {
padding: 3px 0.5rem;

.nav-link-bar-button {
cursor: pointer;
padding: 0 .75rem;
height: 100%;
display: flex;
align-items: center;
border-radius: var(--bs-border-radius);

&:hover {
background-color: var(--bb-tabs-item-hover-bg-color);
}
}

> [data-bs-toggle="tooltip"] {
height: 100%;
display: flex;
align-items: center;
}
}
}

.tabs-chrome > .tabs-header {
padding: 0 .25rem;

.tabs-item-wrap {
overflow: hidden;
position: relative;
Expand Down
5 changes: 4 additions & 1 deletion src/BootstrapBlazor/Locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,10 @@
"CloseAllTabsText": "Close All",
"NotFoundTabText": "NotFound",
"RefreshToolbarTooltipText": "Refresh",
"FullscreenToolbarTooltipText": "Fullscreen"
"FullscreenToolbarTooltipText": "Fullscreen",
"PrevTabNavLinkTooltipText": "Prev Tab",
"NextTabNavLinkTooltipText": "Next Tab",
"CloseTabNavLinkTooltipText": "Close"
},
"BootstrapBlazor.Components.MultiFilter": {
"MultiFilterSearchPlaceHolderText": "Please enter ...",
Expand Down
5 changes: 4 additions & 1 deletion src/BootstrapBlazor/Locales/zh.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,10 @@
"CloseAllTabsText": "关闭所有标签",
"NotFoundTabText": "未找到",
"RefreshToolbarTooltipText": "刷新",
"FullscreenToolbarTooltipText": "全屏"
"FullscreenToolbarTooltipText": "全屏",
"PrevTabNavLinkTooltipText": "上一个标签",
"NextTabNavLinkTooltipText": "下一个标签",
"CloseTabNavLinkTooltipText": "关闭"
},
"BootstrapBlazor.Components.MultiFilter": {
"MultiFilterSearchPlaceHolderText": "请输入 ...",
Expand Down
8 changes: 4 additions & 4 deletions test/UnitTest/Components/TabTest.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,14 +226,14 @@ public void ClickTab_Ok()
Assert.True(clicked);

// Click Prev
var button = cut.Find(".nav-link-bar.left");
var button = cut.Find(".nav-link-bar.left .nav-link-bar-button");
button.Click();
button.Click();
button.Click();
Assert.Equal("Tab1-Content", cut.Find(".tabs-body .d-none").InnerHtml);

// Click Next
button = cut.Find(".nav-link-bar.right");
button = cut.Find(".nav-link-bar.right .nav-link-bar-button");
button.Click();
button.Click();
button.Click();
Expand Down Expand Up @@ -284,11 +284,11 @@ public void ClickTabToNavigation_True()
cut.InvokeAsync(() => cut.Instance.AddTab("/Cat", null!));

// Click Prev
var button = cut.Find(".nav-link-bar.left");
var button = cut.Find(".nav-link-bar.left .nav-link-bar-button");
button.Click();

// Click Next
button = cut.Find(".nav-link-bar.right");
button = cut.Find(".nav-link-bar.right .nav-link-bar-button");
button.Click();

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