Skip to content

Commit cf14593

Browse files
ArgoZhangArgoZhang
committed
feat: 增加 RenderTabHeader 方法
1 parent 721f6a0 commit cf14593

File tree

2 files changed

+125
-122
lines changed

2 files changed

+125
-122
lines changed

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

Lines changed: 124 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -40,151 +40,154 @@ else
4040
@code {
4141
RenderFragment RenderTab =>
4242
@<div @attributes="@AdditionalAttributes" id="@Id" class="@ClassString" style="@StyleString">
43-
<div class="tabs-header">
44-
<div class="@WrapClassString">
45-
@if (BeforeNavigatorTemplate != null)
43+
@RenderTabHeader
44+
<div class="tabs-body">
45+
<CascadingValue Value="this" IsFixed="true">
46+
@if (IsOnlyRenderActiveTab)
4647
{
47-
<CascadingValue Value="this" IsFixed="true">
48-
@BeforeNavigatorTemplate
49-
</CascadingValue>
48+
var item = Items.FirstOrDefault(i => i.IsActive);
49+
if (item != null)
50+
{
51+
@RenderTabItem(item)
52+
}
5053
}
51-
@if (ShowNavigatorButtons)
54+
else
5255
{
53-
<div class="nav-link-bar left">
54-
<Tooltip Title="@PrevTabNavLinkTooltipText" Placement="Placement.Bottom" Trigger="hover">
55-
<div class="nav-link-bar-button" @onclick="@ClickPrevTab">
56-
<i class="@PreviousIcon"></i>
57-
</div>
58-
</Tooltip>
59-
</div>
56+
foreach (var item in Items)
57+
{
58+
@RenderTabItem(item)
59+
}
6060
}
61-
<div class="tabs-nav-scroll">
62-
<div role="tablist" class="tabs-nav">
63-
<CascadingValue Value="this" IsFixed="true">
64-
@ChildContent
65-
</CascadingValue>
66-
<RenderTemplate>
67-
@if (!Items.Any() && !string.IsNullOrEmpty(DefaultUrl))
68-
{
69-
if (ClickTabToNavigation)
70-
{
71-
Navigator.NavigateTo(DefaultUrl);
72-
}
73-
else
74-
{
75-
AddTabItem(DefaultUrl);
76-
}
77-
}
78-
@if (FirstRender)
61+
</CascadingValue>
62+
</div>
63+
</div>;
64+
65+
internal RenderFragment RenderTabHeader =>
66+
@<div class="tabs-header">
67+
<div class="@WrapClassString">
68+
@if (BeforeNavigatorTemplate != null)
69+
{
70+
<CascadingValue Value="this" IsFixed="true">
71+
@BeforeNavigatorTemplate
72+
</CascadingValue>
73+
}
74+
@if (ShowNavigatorButtons)
75+
{
76+
<div class="nav-link-bar left">
77+
<Tooltip Title="@PrevTabNavLinkTooltipText" Placement="Placement.Bottom" Trigger="hover">
78+
<div class="nav-link-bar-button" @onclick="@ClickPrevTab">
79+
<i class="@PreviousIcon"></i>
80+
</div>
81+
</Tooltip>
82+
</div>
83+
}
84+
<div class="tabs-nav-scroll">
85+
<div role="tablist" class="tabs-nav">
86+
<CascadingValue Value="this" IsFixed="true">
87+
@ChildContent
88+
</CascadingValue>
89+
<RenderTemplate>
90+
@if (!Items.Any() && !string.IsNullOrEmpty(DefaultUrl))
91+
{
92+
if (ClickTabToNavigation)
7993
{
80-
if (!Items.Any(t => t.IsActive))
81-
{
82-
Items.FirstOrDefault(i => i.IsDisabled == false)?.SetActive(true);
83-
}
94+
Navigator.NavigateTo(DefaultUrl);
8495
}
85-
@foreach (var item in Items)
96+
else
8697
{
87-
@if (item.HeaderTemplate != null)
88-
{
89-
<div @key="@item" class="@GetItemWrapClassString(item)" draggable="@DraggableString">
90-
@item.HeaderTemplate(item)
91-
</div>
92-
}
93-
else if (item.IsDisabled)
94-
{
95-
@RenderDisabledHeaderItem(item)
96-
}
97-
else
98-
{
99-
@RenderHeaderItem(item)
100-
}
98+
AddTabItem(DefaultUrl);
10199
}
102-
@if (IsCard || IsBorderCard)
100+
}
101+
@if (FirstRender)
102+
{
103+
if (!Items.Any(t => t.IsActive))
103104
{
104-
<div class="tabs-item-fix"></div>
105+
Items.FirstOrDefault(i => i.IsDisabled == false)?.SetActive(true);
105106
}
106-
</RenderTemplate>
107-
@if (!IsCard && !IsBorderCard && ShowActiveBar)
108-
{
109-
<div class="tabs-active-bar"></div>
110107
}
111-
</div>
112-
</div>
113-
<CascadingValue Value="this" IsFixed="true">
114-
@if (ButtonTemplate != null)
115-
{
116-
@ButtonTemplate
117-
}
118-
@if (ShowToolbar)
119-
{
120-
<div class="tabs-nav-toolbar">
121-
@if (ShowRefreshToolbarButton)
108+
@foreach (var item in Items)
109+
{
110+
@if (item.HeaderTemplate != null)
122111
{
123-
<TabToolbarButton class="tabs-nav-toolbar-refresh"
124-
Icon="@RefreshToolbarButtonIcon" OnClickAsync="OnRefreshAsync"
125-
TooltipText="@RefreshToolbarTooltipText"></TabToolbarButton>
112+
<div @key="@item" class="@GetItemWrapClassString(item)" draggable="@DraggableString">
113+
@item.HeaderTemplate(item)
114+
</div>
126115
}
127-
@if (ShowFullscreenToolbarButton)
116+
else if (item.IsDisabled)
128117
{
129-
<div class="tabs-nav-toolbar-button tabs-nav-toolbar-fs">
130-
<FullScreenButton TargetId="@Id"
131-
Icon="@FullscreenToolbarButtonIcon"
132-
TooltipText="@FullscreenToolbarTooltipText"
133-
TooltipPlacement="Placement.Bottom" TooltipTrigger="hover"></FullScreenButton>
134-
</div>
118+
@RenderDisabledHeaderItem(item)
135119
}
136-
@if (ToolbarTemplate != null)
120+
else
137121
{
138-
@ToolbarTemplate
122+
@RenderHeaderItem(item)
139123
}
140-
</div>
141-
}
142-
@if (ShowNavigatorButtons)
143-
{
144-
<div class="nav-link-bar right">
145-
<Tooltip Title="@NextTabNavLinkTooltipText" Placement="Placement.Bottom" Trigger="hover">
146-
<div class="nav-link-bar-button" @onclick="@ClickNextTab">
147-
<i class="@NextIcon"></i>
148-
</div>
149-
</Tooltip>
150-
</div>
151-
}
152-
@if (ShouldShowExtendButtons())
153-
{
154-
<div class="nav-link-bar dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
155-
<Tooltip Title="@CloseTabNavLinkTooltipText" Placement="Placement.Left" Trigger="hover">
156-
<div class="nav-link-bar-button nav-link-close"><i class="@DropdownIcon"></i></div>
157-
</Tooltip>
158-
</div>
159-
<div class="dropdown-menu dropdown-menu-end shadow">
160-
<div class="dropdown-item" @onclick="@CloseCurrentTab"><span>@CloseCurrentTabText</span></div>
161-
<div class="dropdown-item" @onclick="@OnClickCloseOtherTabs"><span>@CloseOtherTabsText</span></div>
162-
<div class="dropdown-item" @onclick="@OnClickCloseAllTabs"><span>@CloseAllTabsText</span></div>
163-
</div>
164-
}
165-
@if (AfterNavigatorTemplate != null)
124+
}
125+
@if (IsCard || IsBorderCard)
126+
{
127+
<div class="tabs-item-fix"></div>
128+
}
129+
</RenderTemplate>
130+
@if (!IsCard && !IsBorderCard && ShowActiveBar)
166131
{
167-
@AfterNavigatorTemplate
132+
<div class="tabs-active-bar"></div>
168133
}
169-
</CascadingValue>
134+
</div>
170135
</div>
171-
</div>
172-
<div class="tabs-body">
173136
<CascadingValue Value="this" IsFixed="true">
174-
@if (IsOnlyRenderActiveTab)
137+
@if (ButtonTemplate != null)
175138
{
176-
var item = Items.FirstOrDefault(i => i.IsActive);
177-
if (item != null)
178-
{
179-
@RenderTabItem(item)
180-
}
139+
@ButtonTemplate
181140
}
182-
else
141+
@if (ShowToolbar)
183142
{
184-
foreach (var item in Items)
185-
{
186-
@RenderTabItem(item)
187-
}
143+
<div class="tabs-nav-toolbar">
144+
@if (ShowRefreshToolbarButton)
145+
{
146+
<TabToolbarButton class="tabs-nav-toolbar-refresh"
147+
Icon="@RefreshToolbarButtonIcon" OnClickAsync="OnRefreshAsync"
148+
TooltipText="@RefreshToolbarTooltipText"></TabToolbarButton>
149+
}
150+
@if (ShowFullscreenToolbarButton)
151+
{
152+
<div class="tabs-nav-toolbar-button tabs-nav-toolbar-fs">
153+
<FullScreenButton TargetId="@Id"
154+
Icon="@FullscreenToolbarButtonIcon"
155+
TooltipText="@FullscreenToolbarTooltipText"
156+
TooltipPlacement="Placement.Bottom" TooltipTrigger="hover"></FullScreenButton>
157+
</div>
158+
}
159+
@if (ToolbarTemplate != null)
160+
{
161+
@ToolbarTemplate
162+
}
163+
</div>
164+
}
165+
@if (ShowNavigatorButtons)
166+
{
167+
<div class="nav-link-bar right">
168+
<Tooltip Title="@NextTabNavLinkTooltipText" Placement="Placement.Bottom" Trigger="hover">
169+
<div class="nav-link-bar-button" @onclick="@ClickNextTab">
170+
<i class="@NextIcon"></i>
171+
</div>
172+
</Tooltip>
173+
</div>
174+
}
175+
@if (ShouldShowExtendButtons())
176+
{
177+
<div class="nav-link-bar dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
178+
<Tooltip Title="@CloseTabNavLinkTooltipText" Placement="Placement.Left" Trigger="hover">
179+
<div class="nav-link-bar-button nav-link-close"><i class="@DropdownIcon"></i></div>
180+
</Tooltip>
181+
</div>
182+
<div class="dropdown-menu dropdown-menu-end shadow">
183+
<div class="dropdown-item" @onclick="@CloseCurrentTab"><span>@CloseCurrentTabText</span></div>
184+
<div class="dropdown-item" @onclick="@OnClickCloseOtherTabs"><span>@CloseOtherTabsText</span></div>
185+
<div class="dropdown-item" @onclick="@OnClickCloseAllTabs"><span>@CloseAllTabsText</span></div>
186+
</div>
187+
}
188+
@if (AfterNavigatorTemplate != null)
189+
{
190+
@AfterNavigatorTemplate
188191
}
189192
</CascadingValue>
190193
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ public partial class Tab : IHandlerException
4242
.AddClass("tabs-vertical", Placement == Placement.Left || Placement == Placement.Right)
4343
.AddClass("tabs-chrome", TabStyle == TabStyle.Chrome)
4444
.AddClass("tabs-capsule", TabStyle == TabStyle.Capsule)
45-
.AddClassFromAttributes(AdditionalAttributes)
45+
.AddClassFromAttributes(AdditionalAttributes)
4646
.Build();
4747

4848
private string? StyleString => CssBuilder.Default()

0 commit comments

Comments
 (0)