Skip to content

Commit eeb838c

Browse files
ArgoZhangArgoZhang
committed
style: 调整 Chrome 模式下按钮样式
1 parent 16792d0 commit eeb838c

File tree

2 files changed

+74
-51
lines changed

2 files changed

+74
-51
lines changed

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

Lines changed: 56 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,11 @@ 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+
<div class="nav-link-bar-button" @onclick="@ClickPrevTab">
24+
<i class="@PreviousIcon"></i>
25+
</div>
26+
</div>
2327
}
2428
<div class="tabs-nav-scroll">
2529
<div role="tablist" class="tabs-nav">
@@ -71,57 +75,59 @@ else
7175
}
7276
</div>
7377
</div>
74-
@if (ButtonTemplate != null)
75-
{
76-
<CascadingValue Value="this" IsFixed="true">
78+
<CascadingValue Value="this" IsFixed="true">
79+
@if (ButtonTemplate != null)
80+
{
7781
@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">
82+
}
83+
@if (ShowToolbar)
84+
{
85+
<div class="tabs-nav-toolbar">
86+
@if (ShowRefreshToolbarButton)
87+
{
88+
<TabToolbarButton class="tabs-nav-toolbar-refresh"
89+
Icon="@RefreshToolbarButtonIcon" OnClickAsync="OnRefreshAsync"
90+
TooltipText="@RefreshToolbarTooltipText"></TabToolbarButton>
91+
}
92+
@if (ShowFullscreenToolbarButton)
93+
{
94+
<div class="tabs-nav-toolbar-button tabs-nav-toolbar-fs">
95+
<FullScreenButton TargetId="@Id"
96+
Icon="@FullscreenToolbarButtonIcon"
97+
TooltipText="@FullscreenToolbarTooltipText"
98+
TooltipPlacement="Placement.Bottom" TooltipTrigger="hover"></FullScreenButton>
99+
</div>
100+
}
101+
@if (ToolbarTemplate != null)
102+
{
101103
@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-
}
104+
}
105+
</div>
106+
}
107+
@if (ShowNavigatorButtons)
108+
{
109+
<div class="nav-link-bar right">
110+
<div class="nav-link-bar-button" @onclick="@ClickPrevTab">
111+
<i class="@NextIcon"></i>
112+
</div>
113+
</div>
114+
}
115+
@if (ShouldShowExtendButtons())
116+
{
117+
<div class="nav-link-bar dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
118+
<div class="nav-link-bar-button nav-link-close"><i class="@DropdownIcon"></i></div>
119+
</div>
120+
<div class="dropdown-menu dropdown-menu-end shadow">
121+
<div class="dropdown-item" @onclick="@CloseCurrentTab"><span>@CloseCurrentTabText</span></div>
122+
<div class="dropdown-item" @onclick="@OnClickCloseOtherTabs"><span>@CloseOtherTabsText</span></div>
123+
<div class="dropdown-item" @onclick="@OnClickCloseAllTabs"><span>@CloseAllTabsText</span></div>
124+
</div>
125+
}
126+
@if (AfterNavigatorTemplate != null)
127+
{
128+
@AfterNavigatorTemplate
129+
}
130+
</CascadingValue>
125131
</div>
126132
</div>
127133
<div class="tabs-body">

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

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@
8484
}
8585

8686
.tabs-nav-wrap {
87-
> .nav-link-bar {
87+
.nav-link-bar {
8888
cursor: pointer;
8989
font-size: 1rem;
9090
color: var(--bs-body-color);
@@ -548,6 +548,23 @@
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+
}
551568
}
552569

553570
.tabs-chrome > .tabs-header {

0 commit comments

Comments
 (0)