Skip to content

Commit cbcfba4

Browse files
ArgoZhangArgoZhang
authored
feat(Tab): add ToolbarTemplate parameter (#5694)
* feat: 增加 ToolbarTempalte 参数 * test: 更新单元测试 * refactor: 增加 TabToolbarButton 组件 * style: 更新样式 * feat: 支持 Tooltip 功能 * doc: 更新示例 * feat: 支持 Placement 参数 * doc: 更新示例文档 * test: 更新单元测试
1 parent 7253bc4 commit cbcfba4

File tree

14 files changed

+234
-31
lines changed

14 files changed

+234
-31
lines changed

‎src/BootstrapBlazor.Server/Components/Samples/Tabs.razor‎

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -423,21 +423,7 @@ private void Navigation()
423423
</DemoBlock>
424424

425425
<DemoBlock Title="@Localizer["TabsDragTitle"]" Introduction="@Localizer["TabsDragIntro"]" Name="AllowDrag">
426-
<Tab IsBorderCard="true" AllowDrag="true" ShowToolbar="true">
427-
<TabItem Text="@Localizer["TabItem1Text"]">
428-
<div>@Localizer["TabItem1Content"]</div>
429-
</TabItem>
430-
<TabItem Text="@Localizer["TabItem2Text"]">
431-
<div>@Localizer["TabItem2Content"]</div>
432-
</TabItem>
433-
<TabItem Text="@Localizer["TabItem3Text"]">
434-
<div>@Localizer["TabItem3Content"]</div>
435-
</TabItem>
436-
</Tab>
437-
</DemoBlock>
438-
439-
<DemoBlock Title="@Localizer["TabsDragTitle"]" Introduction="@Localizer["TabsDragIntro"]" Name="AllowDrag">
440-
<Tab IsBorderCard="true" AllowDrag="true" ShowToolbar="true">
426+
<Tab IsBorderCard="true" AllowDrag="true">
441427
<TabItem Text="@Localizer["TabItem1Text"]">
442428
<div>@Localizer["TabItem1Content"]</div>
443429
</TabItem>
@@ -485,6 +471,28 @@ private void Navigation()
485471
</Tab>
486472
</DemoBlock>
487473

474+
<DemoBlock Title="@Localizer["TabsToolbarTitle"]" Introduction="@Localizer["TabsToolbarIntro"]" Name="Toolbar">
475+
<Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Chrome" ShowToolbar="true">
476+
<ChildContent>
477+
<TabItem Text="@Localizer["TabItem1Text"]" Icon="fa-solid fa-user">
478+
<div>@Localizer["TabItem1Content"]</div>
479+
</TabItem>
480+
<TabItem Text="@Localizer["TabItem2Text"]" Icon="fa-solid fa-gauge-high">
481+
<div>@Localizer["TabItem2Content"]</div>
482+
</TabItem>
483+
<TabItem Text="@Localizer["TabItem3Text"]" Icon="fa-solid fa-sitemap">
484+
<div>@Localizer["TabItem3Content"]</div>
485+
</TabItem>
486+
<TabItem Text="@Localizer["TabItem4Text"]" Icon="fa-solid fa-building-columns">
487+
<div>@Localizer["TabItem4Content"]</div>
488+
</TabItem>
489+
</ChildContent>
490+
<ToolbarTemplate>
491+
<TabToolbarButton Icon="fa fa-home" TooltipText="Home"></TabToolbarButton>
492+
</ToolbarTemplate>
493+
</Tab>
494+
</DemoBlock>
495+
488496
<AttributeTable Items="@GetAttributes()" Title="@Localizer["AttTitle"]" />
489497

490498
<MethodTable Items="@GetMethods()" Title="@Localizer["MethodTitle"]" />

‎src/BootstrapBlazor.Server/Components/Samples/Tabs.razor.cs‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -384,6 +384,70 @@ private AttributeItem[] GetAttributes() =>
384384
Type = "RenderFragment",
385385
ValueList = " — ",
386386
DefaultValue = " — "
387+
},
388+
new()
389+
{
390+
Name = nameof(Tab.ShowToolbar),
391+
Description = Localizer["AttributeShowToolbar"].Value,
392+
Type = "bool",
393+
ValueList = "true|false",
394+
DefaultValue = "false"
395+
},
396+
new()
397+
{
398+
Name = nameof(Tab.ToolbarTemplate),
399+
Description = Localizer["AttributeToolbarTemplate"].Value,
400+
Type = "RenderFragment",
401+
ValueList = " — ",
402+
DefaultValue = " — "
403+
},
404+
new()
405+
{
406+
Name = nameof(Tab.ShowRefreshToolbarButton),
407+
Description = Localizer["AttributeShowRefreshToolbarButton"].Value,
408+
Type = "bool",
409+
ValueList = "true|false",
410+
DefaultValue = "true"
411+
},
412+
new()
413+
{
414+
Name = nameof(Tab.ShowFullscreenToolbarButton),
415+
Description = Localizer["AttributeShowFullscreenToolbarButton"].Value,
416+
Type = "bool",
417+
ValueList = "true|false",
418+
DefaultValue = "true"
419+
},
420+
new()
421+
{
422+
Name = nameof(Tab.RefreshToolbarTooltipText),
423+
Description = Localizer["AttributeRefreshToolbarTooltipText"].Value,
424+
Type = "string?",
425+
ValueList = " — ",
426+
DefaultValue = " — "
427+
},
428+
new()
429+
{
430+
Name = nameof(Tab.FullscreenToolbarTooltipText),
431+
Description = Localizer["AttributeFullscreenToolbarTooltipText"].Value,
432+
Type = "string?",
433+
ValueList = " — ",
434+
DefaultValue = " — "
435+
},
436+
new()
437+
{
438+
Name = nameof(Tab.RefreshToolbarButtonIcon),
439+
Description = Localizer["AttributeRefreshToolbarButtonIcon"].Value,
440+
Type = "string?",
441+
ValueList = " — ",
442+
DefaultValue = " — "
443+
},
444+
new()
445+
{
446+
Name = nameof(Tab.FullscreenToolbarButtonIcon),
447+
Description = Localizer["AttributeFullscreenToolbarButtonIcon"].Value,
448+
Type = "string?",
449+
ValueList = " — ",
450+
DefaultValue = " — "
387451
}
388452
];
389453

‎src/BootstrapBlazor.Server/Locales/en-US.json‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2120,7 +2120,17 @@
21202120
"TabsChromeStyleIntro": "Set the Chrome browser tab style by setting <code>TabStyle=\"TabStyle.Chrome\"</code>. Currently only supports <code>Placement=\"Placement.Top\"</code> mode",
21212121
"TabAtt2TabStyle": "Set the tab style",
21222122
"TabsCapsuleStyleTitle": "Capsule Style",
2123-
"TabsCapsuleStyleIntro": "Set the capsule tab style by setting <code>TabStyle=\"TabStyle.Capsule\"</code>. Currently only supports <code>Placement=\"Placement.Top\"</code> <code>Placement=\"Placement.Bottom\"</code> mode"
2123+
"TabsCapsuleStyleIntro": "Set the capsule tab style by setting <code>TabStyle=\"TabStyle.Capsule\"</code>. Currently only supports <code>Placement=\"Placement.Top\"</code> <code>Placement=\"Placement.Bottom\"</code> mode",
2124+
"AttributeToolbarTemplate": "The template for Toolbar",
2125+
"TabsToolbarTitle": "Toolbar",
2126+
"TabsToolbarIntro": "By setting <code>ShowToolbar</code>, you can display the tab toolbar. By default, the <b>Refresh</b> and <b>Fullscreen</b> buttons are displayed. You can control whether to display them by <code>ShowRefreshToolbarButton</code> and <code>ShowFullscreenToolbarButton</code>",
2127+
"AttributeShowToolbar": "Whether to display the toolbar",
2128+
"AttributeShowRefreshToolbarButton": "Whether to display the toolbar refresh button",
2129+
"AttributeShowFullscreenToolbarButton": "Whether to display the toolbar full screen button",
2130+
"AttributeRefreshToolbarTooltipText": "Toolbar refresh button tooltip text",
2131+
"AttributeFullscreenToolbarTooltipText": "Toolbar full screen button tooltip text",
2132+
"AttributeRefreshToolbarButtonIcon": "Toolbar refresh button icon",
2133+
"AttributeFullscreenToolbarButtonIcon": "Toolbar full screen button icon"
21242134
},
21252135
"BootstrapBlazor.Server.Components.Components.DemoTabItem": {
21262136
"Info": "Reset the title of this <code>TabItem</code> by click the button",

‎src/BootstrapBlazor.Server/Locales/zh-CN.json‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2120,7 +2120,17 @@
21202120
"TabsChromeStyleIntro": "通过设置 <code>TabStyle=\"TabStyle.Chrome\"</code> 设置 Chrome 浏览器标签页样式，目前仅支持 <code>Placement=\"Placement.Top\"</code> 模式",
21212121
"TabAtt2TabStyle": "设置标签页样式",
21222122
"TabsCapsuleStyleTitle": "胶囊样式",
2123-
"TabsCapsuleStyleIntro": "通过设置 <code>TabStyle=\"TabStyle.Capsule\"</code> 设置标签页为胶囊样式，目前仅支持 <code>Placement=\"Placement.Top\"</code> <code>Placement=\"Placement.Bottom\"</code> 模式"
2123+
"TabsCapsuleStyleIntro": "通过设置 <code>TabStyle=\"TabStyle.Capsule\"</code> 设置标签页为胶囊样式，目前仅支持 <code>Placement=\"Placement.Top\"</code> <code>Placement=\"Placement.Bottom\"</code> 模式",
2124+
"AttributeToolbarTemplate": "Toolbar 模板",
2125+
"TabsToolbarTitle": "工具栏",
2126+
"TabsToolbarIntro": "通过设置 <code>ShowToolbar</code> 显示标签页工具栏，默认显示 <b>刷新</b> <b>全屏</b> 按钮，可以通过 <code>ShowRefreshToolbarButton</code> <code>ShowFullscreenToolbarButton</code> 控制是否显示",
2127+
"AttributeShowToolbar": "是否显示工具栏",
2128+
"AttributeShowRefreshToolbarButton": "是否显示工具栏刷新按钮",
2129+
"AttributeShowFullscreenToolbarButton": "是否显示工具栏全屏按钮",
2130+
"AttributeRefreshToolbarTooltipText": "工具栏刷新按钮提示框文字",
2131+
"AttributeFullscreenToolbarTooltipText": "工具栏全屏按钮提示框文字",
2132+
"AttributeRefreshToolbarButtonIcon": "工具栏刷新按钮图标",
2133+
"AttributeFullscreenToolbarButtonIcon": "工具栏全屏按钮图标"
21242134
},
21252135
"BootstrapBlazor.Server.Components.Components.DemoTabItem": {
21262136
"Info": "点击下方按钮，本 <code>TabItem</code> 标题更改为当前分钟与秒",

‎src/BootstrapBlazor/Components/FullScreen/FullScreenButton.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@namespace BootstrapBlazor.Components
22
@inherits ButtonBase
33

4-
<a @attributes="AdditionalAttributes" id="@Id" class="@ClassString" @onclick="ToggleFullScreen">
4+
<a @attributes="AdditionalAttributes" id="@Id" class="@ClassString" data-bs-placement="@PlacementString" @onclick="ToggleFullScreen">
55
<i class="@ButtonIconString"></i>
66
<i class="@FullScreenExitIconString"></i>
77
@if (!string.IsNullOrEmpty(Text))

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

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ else
1313
<div class="@WrapClassString">
1414
@if (BeforeNavigatorTemplate != null)
1515
{
16-
@BeforeNavigatorTemplate
16+
<CascadingValue Value="this" IsFixed="true">
17+
@BeforeNavigatorTemplate
18+
</CascadingValue>
1719
}
1820
@if (ShowNavigatorButtons)
1921
{
@@ -71,23 +73,34 @@ else
7173
</div>
7274
@if (ButtonTemplate != null)
7375
{
74-
@ButtonTemplate
76+
<CascadingValue Value="this" IsFixed="true">
77+
@ButtonTemplate
78+
</CascadingValue>
7579
}
7680
@if (ShowToolbar)
7781
{
7882
<div class="tabs-nav-toolbar">
7983
@if (ShowRefreshToolbarButton)
8084
{
81-
<div class="tabs-nav-toolbar-button tabs-nav-toolbar-refresh">
82-
<TabToolbarRefreshButton Icon="@RefreshToolbarButtonIcon" OnClickAsync="OnRefreshAsync"></TabToolbarRefreshButton>
83-
</div>
85+
<TabToolbarButton class="tabs-nav-toolbar-refresh"
86+
Icon="@RefreshToolbarButtonIcon" OnClickAsync="OnRefreshAsync"
87+
TooltipText="@RefreshToolbarTooltipText"></TabToolbarButton>
8488
}
8589
@if (ShowFullscreenToolbarButton)
8690
{
8791
<div class="tabs-nav-toolbar-button tabs-nav-toolbar-fs">
88-
<FullScreenButton TargetId="@Id"></FullScreenButton>
92+
<FullScreenButton TargetId="@Id"
93+
Icon="@FullscreenToolbarButtonIcon"
94+
TooltipText="@FullscreenToolbarTooltipText"
95+
TooltipPlacement="Placement.Bottom"></FullScreenButton>
8996
</div>
9097
}
98+
@if (ToolbarTemplate != null)
99+
{
100+
<CascadingValue Value="this" IsFixed="true">
101+
@ToolbarTemplate
102+
</CascadingValue>
103+
}
91104
</div>
92105
}
93106
@if (ShowNavigatorButtons)

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,12 @@ public partial class Tab : IHandlerException
227227
[Parameter]
228228
public RenderFragment? ButtonTemplate { get; set; }
229229

230+
/// <summary>
231+
/// Gets or sets the template of the toolbar button. Default is null.
232+
/// </summary>
233+
[Parameter]
234+
public RenderFragment? ToolbarTemplate { get; set; }
235+
230236
/// <summary>
231237
/// 获得/设置 标签页前置模板 默认 null
232238
/// <para>在向前移动标签页按钮前</para>
@@ -302,6 +308,18 @@ public partial class Tab : IHandlerException
302308
[Parameter]
303309
public bool ShowFullscreenToolbarButton { get; set; } = true;
304310

311+
/// <summary>
312+
/// Gets or sets the full screen toolbar button icon string. Default is null.
313+
/// </summary>
314+
[Parameter]
315+
public string? FullscreenToolbarButtonIcon { get; set; }
316+
317+
/// <summary>
318+
/// Gets or sets the full screen toolbar button tooltip string. Default is null.
319+
/// </summary>
320+
[Parameter]
321+
public string? FullscreenToolbarTooltipText { get; set; }
322+
305323
/// <summary>
306324
/// Gets or sets whether show the full screen button. Default is true.
307325
/// </summary>
@@ -314,6 +332,12 @@ public partial class Tab : IHandlerException
314332
[Parameter]
315333
public string? RefreshToolbarButtonIcon { get; set; }
316334

335+
/// <summary>
336+
/// Gets or sets the refresh toolbar button tooltip string. Default is null.
337+
/// </summary>
338+
[Parameter]
339+
public string? RefreshToolbarTooltipText { get; set; }
340+
317341
[CascadingParameter]
318342
private Layout? Layout { get; set; }
319343

@@ -377,6 +401,8 @@ protected override void OnParametersSet()
377401
CloseAllTabsText ??= Localizer[nameof(CloseAllTabsText)];
378402
CloseCurrentTabText ??= Localizer[nameof(CloseCurrentTabText)];
379403
NotFoundTabText ??= Localizer[nameof(NotFoundTabText)];
404+
RefreshToolbarTooltipText ??= Localizer[nameof(RefreshToolbarTooltipText)];
405+
FullscreenToolbarTooltipText ??= Localizer[nameof(FullscreenToolbarTooltipText)];
380406

381407
PreviousIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabPreviousIcon);
382408
NextIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabNextIcon);

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -671,6 +671,12 @@
671671
height: 100%;
672672
padding: 3px 0.5rem;
673673

674+
> [data-bs-toggle="tooltip"] {
675+
height: 100%;
676+
display: flex;
677+
align-items: center;
678+
}
679+
674680
.tabs-nav-toolbar-button {
675681
cursor: pointer;
676682
padding: 0 .75rem;

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@namespace BootstrapBlazor.Components
2+
@inherits BootstrapModuleComponentBase
3+
4+
<Tooltip Title="@TooltipText" Placement="Placement.Bottom">
5+
<div @attributes="@AdditionalAttributes" class="@ClassString" @onclick="OnClick">
6+
<i class="@Icon"></i>
7+
</div>
8+
</Tooltip>

‎src/BootstrapBlazor/Components/Tab/TabToolbarRefreshButton.razor.cs‎ renamed to ‎src/BootstrapBlazor/Components/Tab/TabToolbarButton.razor.cs‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
namespace BootstrapBlazor.Components;
77

88
/// <summary>
9-
/// TabToolbarRefreshButton component
9+
/// TabToolbarButton component
1010
/// </summary>
11-
public partial class TabToolbarRefreshButton
11+
public partial class TabToolbarButton
1212
{
1313
/// <summary>
1414
/// Gets or sets the button icon string. Default is null.
@@ -22,6 +22,16 @@ public partial class TabToolbarRefreshButton
2222
[Parameter]
2323
public Func<Task>? OnClickAsync { get; set; }
2424

25+
/// <summary>
26+
/// Gets or sets the tooltip text. Default is null.
27+
/// </summary>
28+
[Parameter]
29+
public string? TooltipText { get; set; }
30+
31+
private string? ClassString => CssBuilder.Default("tabs-nav-toolbar-button")
32+
.AddClassFromAttributes(AdditionalAttributes)
33+
.Build();
34+
2535
private async Task OnClick()
2636
{
2737
if (OnClickAsync != null)

0 commit comments

Comments
 (0)