@if (!string.IsNullOrEmpty(Text))
diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor b/src/BootstrapBlazor/Components/Tab/Tab.razor
index c5ddbba0d20..ea014eceee2 100644
--- a/src/BootstrapBlazor/Components/Tab/Tab.razor
+++ b/src/BootstrapBlazor/Components/Tab/Tab.razor
@@ -13,7 +13,9 @@ else
@if (BeforeNavigatorTemplate != null)
{
- @BeforeNavigatorTemplate
+
+ @BeforeNavigatorTemplate
+
}
@if (ShowNavigatorButtons)
{
@@ -71,23 +73,34 @@ else
@if (ButtonTemplate != null)
{
- @ButtonTemplate
+
+ @ButtonTemplate
+
}
@if (ShowToolbar)
{
}
@if (ShowNavigatorButtons)
diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs
index 187adc45325..09528ad0228 100644
--- a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs
+++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs
@@ -227,6 +227,12 @@ public partial class Tab : IHandlerException
[Parameter]
public RenderFragment? ButtonTemplate { get; set; }
+ ///
+ /// Gets or sets the template of the toolbar button. Default is null.
+ ///
+ [Parameter]
+ public RenderFragment? ToolbarTemplate { get; set; }
+
///
/// 获得/设置 标签页前置模板 默认 null
/// 在向前移动标签页按钮前
@@ -302,6 +308,18 @@ public partial class Tab : IHandlerException
[Parameter]
public bool ShowFullscreenToolbarButton { get; set; } = true;
+ ///
+ /// Gets or sets the full screen toolbar button icon string. Default is null.
+ ///
+ [Parameter]
+ public string? FullscreenToolbarButtonIcon { get; set; }
+
+ ///
+ /// Gets or sets the full screen toolbar button tooltip string. Default is null.
+ ///
+ [Parameter]
+ public string? FullscreenToolbarTooltipText { get; set; }
+
///
/// Gets or sets whether show the full screen button. Default is true.
///
@@ -314,6 +332,12 @@ public partial class Tab : IHandlerException
[Parameter]
public string? RefreshToolbarButtonIcon { get; set; }
+ ///
+ /// Gets or sets the refresh toolbar button tooltip string. Default is null.
+ ///
+ [Parameter]
+ public string? RefreshToolbarTooltipText { get; set; }
+
[CascadingParameter]
private Layout? Layout { get; set; }
@@ -377,6 +401,8 @@ protected override void OnParametersSet()
CloseAllTabsText ??= Localizer[nameof(CloseAllTabsText)];
CloseCurrentTabText ??= Localizer[nameof(CloseCurrentTabText)];
NotFoundTabText ??= Localizer[nameof(NotFoundTabText)];
+ RefreshToolbarTooltipText ??= Localizer[nameof(RefreshToolbarTooltipText)];
+ FullscreenToolbarTooltipText ??= Localizer[nameof(FullscreenToolbarTooltipText)];
PreviousIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabPreviousIcon);
NextIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabNextIcon);
diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss
index 82fa992a942..acbe3ee6af8 100644
--- a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss
+++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss
@@ -671,6 +671,12 @@
height: 100%;
padding: 3px 0.5rem;
+ > [data-bs-toggle="tooltip"] {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ }
+
.tabs-nav-toolbar-button {
cursor: pointer;
padding: 0 .75rem;
diff --git a/src/BootstrapBlazor/Components/Tab/TabToolbarButton.razor b/src/BootstrapBlazor/Components/Tab/TabToolbarButton.razor
new file mode 100644
index 00000000000..6ba72420030
--- /dev/null
+++ b/src/BootstrapBlazor/Components/Tab/TabToolbarButton.razor
@@ -0,0 +1,8 @@
+@namespace BootstrapBlazor.Components
+@inherits BootstrapModuleComponentBase
+
+
+
+
+
+
diff --git a/src/BootstrapBlazor/Components/Tab/TabToolbarRefreshButton.razor.cs b/src/BootstrapBlazor/Components/Tab/TabToolbarButton.razor.cs
similarity index 68%
rename from src/BootstrapBlazor/Components/Tab/TabToolbarRefreshButton.razor.cs
rename to src/BootstrapBlazor/Components/Tab/TabToolbarButton.razor.cs
index a77d56e80e1..47d1e089b73 100644
--- a/src/BootstrapBlazor/Components/Tab/TabToolbarRefreshButton.razor.cs
+++ b/src/BootstrapBlazor/Components/Tab/TabToolbarButton.razor.cs
@@ -6,9 +6,9 @@
namespace BootstrapBlazor.Components;
///
-/// TabToolbarRefreshButton component
+/// TabToolbarButton component
///
-public partial class TabToolbarRefreshButton
+public partial class TabToolbarButton
{
///
/// Gets or sets the button icon string. Default is null.
@@ -22,6 +22,16 @@ public partial class TabToolbarRefreshButton
[Parameter]
public Func? OnClickAsync { get; set; }
+ ///
+ /// Gets or sets the tooltip text. Default is null.
+ ///
+ [Parameter]
+ public string? TooltipText { get; set; }
+
+ private string? ClassString => CssBuilder.Default("tabs-nav-toolbar-button")
+ .AddClassFromAttributes(AdditionalAttributes)
+ .Build();
+
private async Task OnClick()
{
if (OnClickAsync != null)
diff --git a/src/BootstrapBlazor/Components/Tab/TabToolbarRefreshButton.razor b/src/BootstrapBlazor/Components/Tab/TabToolbarRefreshButton.razor
deleted file mode 100644
index 69e9e9577d9..00000000000
--- a/src/BootstrapBlazor/Components/Tab/TabToolbarRefreshButton.razor
+++ /dev/null
@@ -1,3 +0,0 @@
-@namespace BootstrapBlazor.Components
-
-
diff --git a/src/BootstrapBlazor/Locales/en.json b/src/BootstrapBlazor/Locales/en.json
index 7166f59fed2..e0687cd1daa 100644
--- a/src/BootstrapBlazor/Locales/en.json
+++ b/src/BootstrapBlazor/Locales/en.json
@@ -173,7 +173,9 @@
"CloseCurrentTabText": "Close",
"CloseOtherTabsText": "Close Other",
"CloseAllTabsText": "Close All",
- "NotFoundTabText": "NotFound"
+ "NotFoundTabText": "NotFound",
+ "RefreshToolbarTooltipText": "Refresh",
+ "FullscreenToolbarTooltipText": "Fullscreen"
},
"BootstrapBlazor.Components.MultiFilter": {
"MultiFilterSearchPlaceHolderText": "Please enter ...",
diff --git a/src/BootstrapBlazor/Locales/zh.json b/src/BootstrapBlazor/Locales/zh.json
index ecc46d43db4..4ef25b24f36 100644
--- a/src/BootstrapBlazor/Locales/zh.json
+++ b/src/BootstrapBlazor/Locales/zh.json
@@ -173,7 +173,9 @@
"CloseCurrentTabText": "关闭当前标签",
"CloseOtherTabsText": "关闭其他标签",
"CloseAllTabsText": "关闭所有标签",
- "NotFoundTabText": "未找到"
+ "NotFoundTabText": "未找到",
+ "RefreshToolbarTooltipText": "刷新",
+ "FullscreenToolbarTooltipText": "全屏"
},
"BootstrapBlazor.Components.MultiFilter": {
"MultiFilterSearchPlaceHolderText": "请输入 ...",
diff --git a/test/UnitTest/Components/TabTest.cs b/test/UnitTest/Components/TabTest.cs
index 1e6085e55a9..3bc049d6ad6 100644
--- a/test/UnitTest/Components/TabTest.cs
+++ b/test/UnitTest/Components/TabTest.cs
@@ -25,6 +25,53 @@ protected override void ConfigureServices(IServiceCollection services)
});
}
+ [Fact]
+ public void ToolbarTemplate_Ok()
+ {
+ var cut = Context.RenderComponent(pb =>
+ {
+ pb.AddChildContent(pb =>
+ {
+ pb.Add(a => a.Text, "Tab1");
+ pb.Add(a => a.Url, "/Index");
+ pb.Add(a => a.Closable, true);
+ pb.Add(a => a.Icon, "fa-solid fa-font-awesome");
+ pb.Add(a => a.ChildContent, "Tab1-Content");
+ });
+ pb.Add(a => a.ToolbarTemplate, builder => builder.AddContent(0, "test-toolbar-template"));
+ });
+ cut.DoesNotContain("test-toolbar-template");
+
+ cut.SetParametersAndRender(pb =>
+ {
+ pb.Add(a => a.ShowToolbar, true);
+ });
+ cut.Contains("test-toolbar-template");
+ }
+
+ [Fact]
+ public void ToolbarTooltipText_Ok()
+ {
+ var cut = Context.RenderComponent(pb =>
+ {
+ pb.AddChildContent(pb =>
+ {
+ pb.Add(a => a.Text, "Tab1");
+ pb.Add(a => a.Url, "/Index");
+ pb.Add(a => a.Closable, true);
+ pb.Add(a => a.Icon, "fa-solid fa-font-awesome");
+ pb.Add(a => a.ChildContent, "Tab1-Content");
+ });
+ pb.Add(a => a.ShowToolbar, true);
+ pb.Add(a => a.RefreshToolbarButtonIcon, "test-refresh-icon");
+ pb.Add(a => a.RefreshToolbarTooltipText, "test-refresh-tooltip-text");
+ pb.Add(a => a.FullscreenToolbarButtonIcon, "test-fullscreen-icon");
+ pb.Add(a => a.FullscreenToolbarTooltipText, "test-fullscreen-tooltip-text");
+ });
+ cut.Contains("test-refresh-icon");
+ cut.Contains("test-refresh-tooltip-text");
+ }
+
[Fact]
public void TabItem_Ok()
{