feat(Tab): add OnToolbarRefreshCallback parameter (#5696)

* feat: 增加 OnToolbarRefreshCallback 回调方法

* doc: 更新文档

* doc: 增加刷新按钮回调方法文档说明

* doc: 更新文档

* refactor: 更新  TooltipTrigger 值为 hover

Author: ArgoZhang

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

@@ -457,7 +457,6 @@ private void Navigation()
     <Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Capsule" AllowDrag="true" ShowToolbar="true">
         <TabItem Text="@Localizer["TabItem1Text"]" Icon="fa-solid fa-user">
             <div>@Localizer["TabItem1Content"]</div>
-            <Counter></Counter>
         </TabItem>
         <TabItem Text="@Localizer["TabItem2Text"]" Icon="fa-solid fa-gauge-high">
             <div>@Localizer["TabItem2Content"]</div>
@@ -472,10 +471,14 @@ private void Navigation()
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TabsToolbarTitle"]" Introduction="@Localizer["TabsToolbarIntro"]" Name="Toolbar">
+    <section ignore>
+        <div>@((MarkupString)Localizer["TabsToolbarDesc"].Value)</div>
+    </section>
     <Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Chrome" ShowToolbar="true">
         <ChildContent>
             <TabItem Text="@Localizer["TabItem1Text"]" Icon="fa-solid fa-user">
                 <div>@Localizer["TabItem1Content"]</div>
+                <Counter></Counter>
             </TabItem>
             <TabItem Text="@Localizer["TabItem2Text"]" Icon="fa-solid fa-gauge-high">
                 <div>@Localizer["TabItem2Content"]</div>
@@ -488,7 +491,7 @@ private void Navigation()
             </TabItem>
         </ChildContent>
         <ToolbarTemplate>
-            <TabToolbarButton Icon="fa fa-home" TooltipText="Home"></TabToolbarButton>
+            <TabToolbarButton Icon="fa fa-home fa-shake" TooltipText="Home"></TabToolbarButton>
         </ToolbarTemplate>
     </Tab>
 </DemoBlock>

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<Task>",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
         {
             Name = nameof(Tab.FullscreenToolbarButtonIcon),
             Description = Localizer["AttributeFullscreenToolbarButtonIcon"].Value,

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

@@ -2123,14 +2123,16 @@
     "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",
     "AttributeToolbarTemplate": "The template for Toolbar",
     "TabsToolbarTitle": "Toolbar",
-    "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>",
+    "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>, click the <b>Refresh</b> button to trigger the <code>OnToolbarRefreshCallback</code> callback method. You can customize toolbar buttons using <code>ToolbarTemplate</code>",
     "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 <b>Refresh</b> 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 <code>TabItem</code> by click the button",

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

@@ -2123,14 +2123,16 @@
     "TabsCapsuleStyleIntro": "通过设置 <code>TabStyle=\"TabStyle.Capsule\"</code> 设置标签页为胶囊样式，目前仅支持 <code>Placement=\"Placement.Top\"</code>  <code>Placement=\"Placement.Bottom\"</code> 模式",
     "AttributeToolbarTemplate": "Toolbar 模板",
     "TabsToolbarTitle": "工具栏",
-    "TabsToolbarIntro": "通过设置 <code>ShowToolbar</code> 显示标签页工具栏，默认显示 <b>刷新</b> <b>全屏</b> 按钮，可以通过 <code>ShowRefreshToolbarButton</code> <code>ShowFullscreenToolbarButton</code> 控制是否显示",
+    "TabsToolbarIntro": "通过设置 <code>ShowToolbar</code> 显示标签页工具栏，默认显示 <b>刷新</b> <b>全屏</b> 按钮，可以通过 <code>ShowRefreshToolbarButton</code> <code>ShowFullscreenToolbarButton</code> 控制是否显示，点击 <b>刷新</b> 按钮后触发 <code>OnToolbarRefreshCallback</code> 回调方法，可以通过 <code>ToolbarTemplate</code> 自定义工具栏按钮",
     "AttributeShowToolbar": "是否显示工具栏",
     "AttributeShowRefreshToolbarButton": "是否显示工具栏刷新按钮",
     "AttributeShowFullscreenToolbarButton": "是否显示工具栏全屏按钮",
     "AttributeRefreshToolbarTooltipText": "工具栏刷新按钮提示框文字",
     "AttributeFullscreenToolbarTooltipText": "工具栏全屏按钮提示框文字",
     "AttributeRefreshToolbarButtonIcon": "工具栏刷新按钮图标",
-    "AttributeFullscreenToolbarButtonIcon": "工具栏全屏按钮图标"
+    "AttributeFullscreenToolbarButtonIcon": "工具栏全屏按钮图标",
+    "TabsToolbarDesc": "点击按钮计数器数值增加后，点击工具栏的 <b>刷新</b> 按钮计数器清零",
+    "AttributeOnToolbarRefreshCallback": "点击工具栏刷新按钮回调方法"
   },
   "BootstrapBlazor.Server.Components.Components.DemoTabItem": {
     "Info": "点击下方按钮，本 <code>TabItem</code> 标题更改为当前分钟与秒",

src/BootstrapBlazor/Components/Tab/Tab.razor

@@ -92,7 +92,7 @@ else
                                 <FullScreenButton TargetId="@Id"
                                                   Icon="@FullscreenToolbarButtonIcon"
                                                   TooltipText="@FullscreenToolbarTooltipText"
-                                                  TooltipPlacement="Placement.Bottom"></FullScreenButton>
+                                                  TooltipPlacement="Placement.Bottom" TooltipTrigger="hover"></FullScreenButton>
                             </div>
                         }
                         @if (ToolbarTemplate != null)

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

@@ -338,6 +338,12 @@ public partial class Tab : IHandlerException
     [Parameter]
     public string? RefreshToolbarTooltipText { get; set; }
 
+    /// <summary>
+    /// Gets or sets the refresh toolbar button click event callback. Default is null.
+    /// </summary>
+    [Parameter]
+    public Func<Task>? 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();
+        }
     }
 
     /// <summary>

src/BootstrapBlazor/Components/Tab/TabToolbarButton.razor

@@ -1,7 +1,7 @@
 @namespace BootstrapBlazor.Components
 @inherits BootstrapModuleComponentBase
 
-<Tooltip Title="@TooltipText" Placement="Placement.Bottom">
+<Tooltip Title="@TooltipText" Placement="Placement.Bottom" Trigger="hover">
     <div @attributes="@AdditionalAttributes" class="@ClassString" @onclick="OnClick">
         <i class="@Icon"></i>
     </div>

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<BootstrapBlazorRoot>(pb =>
         {
             pb.AddChildContent<Tab>(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 =>
         {