Skip to content

Commit b0c29a6

Browse files
ArgoZhangArgoZhang
authored
feat(Tab): reduce cascade parameters (#5771)
* refactor: 重构参数减少级联参数的使用 * refactor: 减少级联参数 * refactor: 使用代码完成渲染 * refactor: 调整 fix 元素 * refactor: 增加右键支持 * refactor: 更新渲染逻辑 * refactor: 更新样式 * refactor: 更新 LayoutId 获得逻辑 * refactor: 撤销样式 * test: 更新单元测试
1 parent 14a1b19 commit b0c29a6

File tree

7 files changed

+177
-156
lines changed

7 files changed

+177
-156
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ public partial class Layout : IHandlerException
3333
/// Gets or sets the template of the toolbar button. Default is null.
3434
/// </summary>
3535
[Parameter]
36-
public RenderFragment? ToolbarTemplate { get; set; }
36+
public RenderFragment<Tab>? ToolbarTemplate { get; set; }
3737

3838
/// <summary>
3939
/// Gets or sets whether show the full screen button. Default is true.

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

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -49,14 +49,6 @@
4949

5050
.layout-main {
5151
min-height: calc(var(--bb-layout-height) - var(--bb-layout-header-height) - var(--bb-layout-footer-height));
52-
53-
> .tabs,
54-
> .bb-cm-zone > .tabs {
55-
margin: -1rem;
56-
border: none;
57-
border-radius: unset;
58-
min-height: calc(100% + 2rem);
59-
}
6052
}
6153
}
6254

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

Lines changed: 83 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -6,40 +6,9 @@
66
{
77
@Body
88
}
9-
else if (ShowContextMenu)
10-
{
11-
<ContextMenuZone @ref="_contextMenuZone">
12-
@RenderTab
13-
<ContextMenu>
14-
@if (BeforeContextMenuTemplate != null)
15-
{
16-
@BeforeContextMenuTemplate(this)
17-
}
18-
<ContextMenuItem Icon="@ContextMenuRefreshIcon" Text="@Localizer["ContextRefresh"]" OnClick="OnRefresh"></ContextMenuItem>
19-
<ContextMenuDivider></ContextMenuDivider>
20-
<ContextMenuItem Icon="@ContextMenuCloseIcon" Text="@Localizer["ContextClose"]" OnClick="OnClose"></ContextMenuItem>
21-
<ContextMenuItem Icon="@ContextMenuCloseOtherIcon" Text="@Localizer["ContextCloseOther"]" OnClick="OnCloseOther"></ContextMenuItem>
22-
<ContextMenuItem Icon="@ContextMenuCloseAllIcon" Text="@Localizer["ContextCloseAll"]" OnClick="OnCloseAll"></ContextMenuItem>
23-
@if (ShowContextMenuFullScreen)
24-
{
25-
<ContextMenuDivider></ContextMenuDivider>
26-
<ContextMenuItem Icon="@ContextMenuFullScreenIcon" Text="@Localizer["ContextFullScreen"]" OnClick="OnFullScreen"></ContextMenuItem>
27-
}
28-
@if (ContextMenuTemplate != null)
29-
{
30-
@ContextMenuTemplate(this)
31-
}
32-
</ContextMenu>
33-
</ContextMenuZone>
34-
}
359
else
3610
{
37-
@RenderTab
38-
}
39-
40-
@code {
41-
RenderFragment RenderTab =>
42-
@<div @attributes="@AdditionalAttributes" id="@Id" class="@ClassString" style="@StyleString">
11+
<div @attributes="@AdditionalAttributes" id="@Id" class="@ClassString" style="@StyleString">
4312
@if (TabHeader != null)
4413
{
4514
TabHeader.Render(RenderTabHeader);
@@ -67,16 +36,16 @@ else
6736
}
6837
</CascadingValue>
6938
</div>
70-
</div>;
39+
</div>
40+
}
7141

42+
@code {
7243
RenderFragment RenderTabHeader =>
7344
@<div class="tabs-header">
7445
<div class="@WrapClassString">
7546
@if (BeforeNavigatorTemplate != null)
7647
{
77-
<CascadingValue Value="this" IsFixed="true">
78-
@BeforeNavigatorTemplate
79-
</CascadingValue>
48+
@BeforeNavigatorTemplate(this)
8049
}
8150
@if (ShowNavigatorButtons)
8251
{
@@ -94,111 +63,93 @@ else
9463
@ChildContent
9564
</CascadingValue>
9665
<RenderTemplate>
97-
@if (!Items.Any() && !string.IsNullOrEmpty(DefaultUrl))
98-
{
99-
if (ClickTabToNavigation)
100-
{
101-
Navigator.NavigateTo(DefaultUrl);
102-
}
103-
else
104-
{
105-
AddTabItem(DefaultUrl);
106-
}
107-
}
108-
@if (FirstRender)
109-
{
110-
if (!Items.Any(t => t.IsActive))
111-
{
112-
Items.FirstOrDefault(i => i.IsDisabled == false)?.SetActive(true);
113-
}
114-
}
115-
@foreach (var item in Items)
116-
{
117-
@if (item.HeaderTemplate != null)
118-
{
119-
<div @key="@item" class="@GetItemWrapClassString(item)" draggable="@DraggableString">
120-
@item.HeaderTemplate(item)
121-
</div>
122-
}
123-
else if (item.IsDisabled)
124-
{
125-
@RenderDisabledHeaderItem(item)
126-
}
127-
else
128-
{
129-
@RenderHeaderItem(item)
130-
}
131-
}
132-
@if (IsCard || IsBorderCard)
133-
{
134-
<div class="tabs-item-fix"></div>
135-
}
66+
@RenderTabList()
13667
</RenderTemplate>
13768
@if (!IsCard && !IsBorderCard && ShowActiveBar)
13869
{
13970
<div class="tabs-active-bar"></div>
14071
}
14172
</div>
14273
</div>
143-
<CascadingValue Value="this" IsFixed="true">
144-
@if (ButtonTemplate != null)
145-
{
146-
@ButtonTemplate
147-
}
148-
@if (ShowToolbar)
149-
{
150-
<div class="tabs-nav-toolbar">
151-
@if (ShowRefreshToolbarButton)
152-
{
153-
<TabToolbarButton class="tabs-nav-toolbar-refresh"
154-
Icon="@RefreshToolbarButtonIcon" OnClickAsync="OnRefreshAsync"
155-
TooltipText="@RefreshToolbarTooltipText"></TabToolbarButton>
156-
}
157-
@if (ShowFullscreenToolbarButton)
158-
{
159-
<div class="tabs-nav-toolbar-button tabs-nav-toolbar-fs">
160-
<FullScreenButton TargetId="@Id"
161-
Icon="@FullscreenToolbarButtonIcon"
162-
TooltipText="@FullscreenToolbarTooltipText"
163-
TooltipPlacement="Placement.Bottom" TooltipTrigger="hover"></FullScreenButton>
164-
</div>
165-
}
166-
@if (ToolbarTemplate != null)
167-
{
168-
@ToolbarTemplate
169-
}
170-
</div>
171-
}
172-
@if (ShowNavigatorButtons)
173-
{
174-
<div class="nav-link-bar right">
175-
<Tooltip Title="@NextTabNavLinkTooltipText" Placement="Placement.Bottom" Trigger="hover">
176-
<div class="nav-link-bar-button" @onclick="@ClickNextTab">
177-
<i class="@NextIcon"></i>
178-
</div>
179-
</Tooltip>
180-
</div>
181-
}
182-
@if (ShouldShowExtendButtons())
183-
{
184-
<div class="nav-link-bar dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
185-
<Tooltip Title="@CloseTabNavLinkTooltipText" Placement="Placement.Left" Trigger="hover">
186-
<div class="nav-link-bar-button nav-link-close"><i class="@DropdownIcon"></i></div>
187-
</Tooltip>
188-
</div>
189-
<div class="dropdown-menu dropdown-menu-end shadow">
190-
<div class="dropdown-item" @onclick="@CloseCurrentTab"><span>@CloseCurrentTabText</span></div>
191-
<div class="dropdown-item" @onclick="@OnClickCloseOtherTabs"><span>@CloseOtherTabsText</span></div>
192-
<div class="dropdown-item" @onclick="@OnClickCloseAllTabs"><span>@CloseAllTabsText</span></div>
193-
</div>
194-
}
195-
@if (AfterNavigatorTemplate != null)
196-
{
197-
@AfterNavigatorTemplate
198-
}
199-
</CascadingValue>
74+
@if (ButtonTemplate != null)
75+
{
76+
@ButtonTemplate(this)
77+
}
78+
@if (ShowToolbar)
79+
{
80+
<div class="tabs-nav-toolbar">
81+
@if (ShowRefreshToolbarButton)
82+
{
83+
<TabToolbarButton class="tabs-nav-toolbar-refresh"
84+
Icon="@RefreshToolbarButtonIcon" OnClickAsync="OnRefreshAsync"
85+
TooltipText="@RefreshToolbarTooltipText"></TabToolbarButton>
86+
}
87+
@if (ShowFullscreenToolbarButton)
88+
{
89+
<div class="tabs-nav-toolbar-button tabs-nav-toolbar-fs">
90+
<FullScreenButton TargetId="@Id"
91+
Icon="@FullscreenToolbarButtonIcon"
92+
TooltipText="@FullscreenToolbarTooltipText"
93+
TooltipPlacement="Placement.Bottom" TooltipTrigger="hover"></FullScreenButton>
94+
</div>
95+
}
96+
@if (ToolbarTemplate != null)
97+
{
98+
@ToolbarTemplate(this)
99+
}
100+
</div>
101+
}
102+
@if (ShowNavigatorButtons)
103+
{
104+
<div class="nav-link-bar right">
105+
<Tooltip Title="@NextTabNavLinkTooltipText" Placement="Placement.Bottom" Trigger="hover">
106+
<div class="nav-link-bar-button" @onclick="@ClickNextTab">
107+
<i class="@NextIcon"></i>
108+
</div>
109+
</Tooltip>
110+
</div>
111+
}
112+
@if (ShouldShowExtendButtons())
113+
{
114+
<div class="nav-link-bar dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
115+
<Tooltip Title="@CloseTabNavLinkTooltipText" Placement="Placement.Left" Trigger="hover">
116+
<div class="nav-link-bar-button nav-link-close"><i class="@DropdownIcon"></i></div>
117+
</Tooltip>
118+
</div>
119+
<div class="dropdown-menu dropdown-menu-end shadow">
120+
<div class="dropdown-item" @onclick="@CloseCurrentTab"><span>@CloseCurrentTabText</span></div>
121+
<div class="dropdown-item" @onclick="@OnClickCloseOtherTabs"><span>@CloseOtherTabsText</span></div>
122+
<div class="dropdown-item" @onclick="@OnClickCloseAllTabs"><span>@CloseAllTabsText</span></div>
123+
</div>
124+
}
125+
@if (AfterNavigatorTemplate != null)
126+
{
127+
@AfterNavigatorTemplate(this)
128+
}
200129
</div>
201130
</div>;
131+
132+
RenderFragment RenderContextMenu =>
133+
@<ContextMenu>
134+
@if (BeforeContextMenuTemplate != null)
135+
{
136+
@BeforeContextMenuTemplate(this)
137+
}
138+
<ContextMenuItem Icon="@ContextMenuRefreshIcon" Text="@Localizer["ContextRefresh"]" OnClick="OnRefresh"></ContextMenuItem>
139+
<ContextMenuDivider></ContextMenuDivider>
140+
<ContextMenuItem Icon="@ContextMenuCloseIcon" Text="@Localizer["ContextClose"]" OnClick="OnClose"></ContextMenuItem>
141+
<ContextMenuItem Icon="@ContextMenuCloseOtherIcon" Text="@Localizer["ContextCloseOther"]" OnClick="OnCloseOther"></ContextMenuItem>
142+
<ContextMenuItem Icon="@ContextMenuCloseAllIcon" Text="@Localizer["ContextCloseAll"]" OnClick="OnCloseAll"></ContextMenuItem>
143+
@if (ShowContextMenuFullScreen)
144+
{
145+
<ContextMenuDivider></ContextMenuDivider>
146+
<ContextMenuItem Icon="@ContextMenuFullScreenIcon" Text="@Localizer["ContextFullScreen"]" OnClick="OnFullScreen"></ContextMenuItem>
147+
}
148+
@if (ContextMenuTemplate != null)
149+
{
150+
@ContextMenuTemplate(this)
151+
}
152+
</ContextMenu>;
202153

203154
RenderFragment<TabItem> RenderTabItem => item =>
204155
@<CascadingValue Value="item" IsFixed="true">

0 commit comments

Comments
 (0)