diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor b/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor index 94b5c192492..ee784ea03f7 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor @@ -457,7 +457,6 @@ private void Navigation()
@Localizer["TabItem1Content"]
-
@Localizer["TabItem2Content"]
@@ -472,10 +471,14 @@ private void Navigation() +
+
@((MarkupString)Localizer["TabsToolbarDesc"].Value)
+
@Localizer["TabItem1Content"]
+
@Localizer["TabItem2Content"]
@@ -488,7 +491,7 @@ private void Navigation() - + diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor.cs index c4288da0bd9..451677d0dc0 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor.cs @@ -442,6 +442,14 @@ private AttributeItem[] GetAttributes() => DefaultValue = " — " }, new() + { + Name = nameof(Tab.OnToolbarRefreshCallback), + Description = Localizer["AttributeOnToolbarRefreshCallback"].Value, + Type = "Func", + ValueList = " — ", + DefaultValue = " — " + }, + new() { Name = nameof(Tab.FullscreenToolbarButtonIcon), Description = Localizer["AttributeFullscreenToolbarButtonIcon"].Value, diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index f49c380c855..4704f1fb0bd 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -2123,14 +2123,16 @@ "TabsCapsuleStyleIntro": "Set the capsule tab style by setting TabStyle=\"TabStyle.Capsule\". Currently only supports Placement=\"Placement.Top\" Placement=\"Placement.Bottom\" mode", "AttributeToolbarTemplate": "The template for Toolbar", "TabsToolbarTitle": "Toolbar", - "TabsToolbarIntro": "By setting ShowToolbar, you can display the tab toolbar. By default, the Refresh and Fullscreen buttons are displayed. You can control whether to display them by ShowRefreshToolbarButton and ShowFullscreenToolbarButton", + "TabsToolbarIntro": "By setting ShowToolbar, you can display the tab toolbar. By default, the Refresh and Fullscreen buttons are displayed. You can control whether to display them by ShowRefreshToolbarButton and ShowFullscreenToolbarButton, click the Refresh button to trigger the OnToolbarRefreshCallback callback method. You can customize toolbar buttons using ToolbarTemplate", "AttributeShowToolbar": "Whether to display the toolbar", "AttributeShowRefreshToolbarButton": "Whether to display the toolbar refresh button", "AttributeShowFullscreenToolbarButton": "Whether to display the toolbar full screen button", "AttributeRefreshToolbarTooltipText": "Toolbar refresh button tooltip text", "AttributeFullscreenToolbarTooltipText": "Toolbar full screen button tooltip text", "AttributeRefreshToolbarButtonIcon": "Toolbar refresh button icon", - "AttributeFullscreenToolbarButtonIcon": "Toolbar full screen button icon" + "AttributeFullscreenToolbarButtonIcon": "Toolbar full screen button icon", + "TabsToolbarDesc": "After clicking the button, the counter value increases, and clicking the Refresh button on the toolbar will reset the counter.", + "AttributeOnToolbarRefreshCallback": "Click the toolbar refresh button callback method" }, "BootstrapBlazor.Server.Components.Components.DemoTabItem": { "Info": "Reset the title of this TabItem by click the button", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 2455cc8c013..6afbbb41e80 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -2123,14 +2123,16 @@ "TabsCapsuleStyleIntro": "通过设置 TabStyle=\"TabStyle.Capsule\" 设置标签页为胶囊样式，目前仅支持 Placement=\"Placement.Top\" Placement=\"Placement.Bottom\" 模式", "AttributeToolbarTemplate": "Toolbar 模板", "TabsToolbarTitle": "工具栏", - "TabsToolbarIntro": "通过设置 ShowToolbar 显示标签页工具栏，默认显示 刷新 全屏 按钮，可以通过 ShowRefreshToolbarButton ShowFullscreenToolbarButton 控制是否显示", + "TabsToolbarIntro": "通过设置 ShowToolbar 显示标签页工具栏，默认显示 刷新 全屏 按钮，可以通过 ShowRefreshToolbarButton ShowFullscreenToolbarButton 控制是否显示，点击 刷新 按钮后触发 OnToolbarRefreshCallback 回调方法，可以通过 ToolbarTemplate 自定义工具栏按钮", "AttributeShowToolbar": "是否显示工具栏", "AttributeShowRefreshToolbarButton": "是否显示工具栏刷新按钮", "AttributeShowFullscreenToolbarButton": "是否显示工具栏全屏按钮", "AttributeRefreshToolbarTooltipText": "工具栏刷新按钮提示框文字", "AttributeFullscreenToolbarTooltipText": "工具栏全屏按钮提示框文字", "AttributeRefreshToolbarButtonIcon": "工具栏刷新按钮图标", - "AttributeFullscreenToolbarButtonIcon": "工具栏全屏按钮图标" + "AttributeFullscreenToolbarButtonIcon": "工具栏全屏按钮图标", + "TabsToolbarDesc": "点击按钮计数器数值增加后，点击工具栏的 刷新 按钮计数器清零", + "AttributeOnToolbarRefreshCallback": "点击工具栏刷新按钮回调方法" }, "BootstrapBlazor.Server.Components.Components.DemoTabItem": { "Info": "点击下方按钮，本 TabItem 标题更改为当前分钟与秒", diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor b/src/BootstrapBlazor/Components/Tab/Tab.razor index ea014eceee2..37bcab00101 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor @@ -92,7 +92,7 @@ else + TooltipPlacement="Placement.Bottom" TooltipTrigger="hover"> } @if (ToolbarTemplate != null) diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs index 09528ad0228..84a50c17829 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.cs +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.cs @@ -338,6 +338,12 @@ public partial class Tab : IHandlerException [Parameter] public string? RefreshToolbarTooltipText { get; set; } + /// + /// Gets or sets the refresh toolbar button click event callback. Default is null. + /// + [Parameter] + public Func? OnToolbarRefreshCallback { get; set; } + [CascadingParameter] private Layout? Layout { get; set; } @@ -934,12 +940,16 @@ public async Task DragItemCallback(int originIndex, int currentIndex) private string? GetIdByTabItem(TabItem item) => ComponentIdGenerator.Generate(item); - private Task OnRefreshAsync() + private async Task OnRefreshAsync() { // refresh the active tab item var item = TabItems.FirstOrDefault(i => i.IsActive); item.Refresh(_cache); - return Task.CompletedTask; + + if (OnToolbarRefreshCallback != null) + { + await OnToolbarRefreshCallback(); + } } /// diff --git a/src/BootstrapBlazor/Components/Tab/TabToolbarButton.razor b/src/BootstrapBlazor/Components/Tab/TabToolbarButton.razor index 6ba72420030..25d4446e077 100644 --- a/src/BootstrapBlazor/Components/Tab/TabToolbarButton.razor +++ b/src/BootstrapBlazor/Components/Tab/TabToolbarButton.razor @@ -1,7 +1,7 @@ @namespace BootstrapBlazor.Components @inherits BootstrapModuleComponentBase - +
diff --git a/test/UnitTest/Components/TabTest.cs b/test/UnitTest/Components/TabTest.cs index 3bc049d6ad6..9f5152d4121 100644 --- a/test/UnitTest/Components/TabTest.cs +++ b/test/UnitTest/Components/TabTest.cs @@ -1021,6 +1021,7 @@ public void BeforeNavigatorTemplate_Ok() [Fact] public async Task ShowToolbar_Ok() { + var clicked = false; var cut = Context.RenderComponent(pb => { pb.AddChildContent(pb => @@ -1032,6 +1033,11 @@ public async Task ShowToolbar_Ok() pb.Add(a => a.Text, "Text1"); pb.Add(a => a.ChildContent, builder => builder.AddContent(0, "Test1")); }); + pb.Add(a => a.OnToolbarRefreshCallback, () => + { + clicked = true; + return Task.CompletedTask; + }); }); }); cut.DoesNotContain("tabs-nav-toolbar"); @@ -1046,8 +1052,9 @@ public async Task ShowToolbar_Ok() cut.Contains("tabs-nav-toolbar-fs"); // 点击刷新按钮 - var button = cut.Find(".tabs-nav-toolbar-refresh > i"); + var button = cut.Find(".tabs-nav-toolbar-refresh"); await cut.InvokeAsync(() => button.Click()); + Assert.True(clicked); tab.SetParametersAndRender(pb => {