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 10 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
8 changes: 4 additions & 4 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 @@ -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
106 changes: 56 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,11 @@ else
}
@if (ShowNavigatorButtons)
{
<div class="nav-link-bar left" @onclick="@ClickPrevTab"><i class="@PreviousIcon"></i></div>
<div class="nav-link-bar left">
<div class="nav-link-bar-button" @onclick="@ClickPrevTab">
<i class="@PreviousIcon"></i>
</div>
</div>
}
<div class="tabs-nav-scroll">
<div role="tablist" class="tabs-nav">
Expand Down Expand Up @@ -71,57 +75,59 @@ 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">
<div class="nav-link-bar-button" @onclick="@ClickPrevTab">
<i class="@NextIcon"></i>
</div>
</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-bar-button 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
}
</CascadingValue>
</div>
</div>
<div class="tabs-body">
Expand Down
19 changes: 18 additions & 1 deletion src/BootstrapBlazor/Components/Tab/Tab.razor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@
}

.tabs-nav-wrap {
> .nav-link-bar {
.nav-link-bar {
cursor: pointer;
font-size: 1rem;
color: var(--bs-body-color);
Expand Down Expand Up @@ -548,6 +548,23 @@
.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);
}
}
}
}

.tabs-chrome > .tabs-header {
Expand Down
Loading