feat(Tab): support context menu

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

@@ -496,6 +496,30 @@ private void Navigation()
     </Tab>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["TabsContextMenuTitle"]" Introduction="@Localizer["TabsContextMenuIntro"]" Name="ContextMenu">
+    <ContextMenuZone>
+        <Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Chrome" ShowToolbar="true" @ref="_tab">
+            <TabItem Text="@Localizer["TabItem1Text"]" Icon="fa-solid fa-user">
+                <div>@Localizer["TabItem1Content"]</div>
+            </TabItem>
+            <TabItem Text="@Localizer["TabItem2Text"]" Icon="fa-solid fa-gauge-high">
+                <div>@Localizer["TabItem2Content"]</div>
+            </TabItem>
+            <TabItem Text="@Localizer["TabItem3Text"]" Icon="fa-solid fa-sitemap">
+                <div>@Localizer["TabItem3Content"]</div>
+            </TabItem>
+            <TabItem Text="@Localizer["TabItem4Text"]" Icon="fa-solid fa-building-columns">
+                <div>@Localizer["TabItem4Content"]</div>
+            </TabItem>
+        </Tab>
+        <ContextMenu>
+            <ContextMenuItem Icon="fa-solid fa-xmark" Text="@Localizer["ContextClose"]" OnClick="OnClose"></ContextMenuItem>
+            <ContextMenuItem Icon="fa-solid fa-left-right" Text="@Localizer["ContextCloseOther"]" OnClick="OnCloseOther"></ContextMenuItem>
+            <ContextMenuItem Icon="fa-solid fa-arrows-left-right-to-line" Text="@Localizer["ContextCloseAll"]" OnClick="OnCloseAll"></ContextMenuItem>
+        </ContextMenu>
+    </ContextMenuZone>
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()" Title="@Localizer["AttTitle"]" />
 
 <MethodTable Items="@GetMethods()" Title="@Localizer["MethodTitle"]" />

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

@@ -171,6 +171,33 @@ private Task OnSetTitle(string text)
         return Task.CompletedTask;
     }
 
+    [NotNull]
+    private Tab? _tab = null;
+
+    private async Task OnClose(ContextMenuItem item, object? context)
+    {
+        if (context is TabItem tabItem)
+        {
+            await _tab.RemoveTab(tabItem);
+        }
+    }
+
+    private Task OnCloseOther(ContextMenuItem item, object? context)
+    {
+        if (context is TabItem tabItem)
+        {
+            _tab.ActiveTab(tabItem);
+        }
+        _tab.CloseOtherTabs();
+        return Task.CompletedTask;
+    }
+
+    private Task OnCloseAll(ContextMenuItem item, object? context)
+    {
+        _tab.CloseAllTabs();
+        return Task.CompletedTask;
+    }
+
     /// <summary>
     /// 获得属性方法
     /// </summary>

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

@@ -2132,7 +2132,12 @@
     "AttributeRefreshToolbarButtonIcon": "Toolbar refresh 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"
+    "AttributeOnToolbarRefreshCallback": "Click the toolbar refresh button callback method",
+    "ContextClose": "Close",
+    "ContextCloseOther": "Close Other Tabs",
+    "ContextCloseAll": "Close All Tabs",
+    "TabsContextMenuTitle": "TabItem Context Menu",
+    "TabsContextMenuIntro": "Use the built-in <code>ContextMenuZone</code> component to pop up a custom context menu when you right-click a tab item"
   },
   "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

@@ -2132,7 +2132,12 @@
     "AttributeRefreshToolbarButtonIcon": "工具栏刷新按钮图标",
     "AttributeFullscreenToolbarButtonIcon": "工具栏全屏按钮图标",
     "TabsToolbarDesc": "点击按钮计数器数值增加后，点击工具栏的 <b>刷新</b> 按钮计数器清零",
-    "AttributeOnToolbarRefreshCallback": "点击工具栏刷新按钮回调方法"
+    "AttributeOnToolbarRefreshCallback": "点击工具栏刷新按钮回调方法",
+    "ContextClose": "关闭",
+    "ContextCloseOther": "关闭其他",
+    "ContextCloseAll": "关闭全部",
+    "TabsContextMenuTitle": "右键菜单",
+    "TabsContextMenuIntro": "通过内置 <code>ContextMenuZone</code> 组件，点击标签页右键时弹窗自定义右键菜单"
   },
   "BootstrapBlazor.Server.Components.Components.DemoTabItem": {
     "Info": "点击下方按钮，本 <code>TabItem</code> 标题更改为当前分钟与秒",

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.4.11</Version>
+    <Version>9.5.0-beta12</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Tab/Tab.razor

@@ -166,7 +166,9 @@ else
 
     RenderFragment RenderHeaderItem(TabItem item) =>
     @<div @key="@item" class="@GetItemWrapClassString(item)" draggable="@DraggableString">
-        <a href="@item.Url" role="tab" tabindex="-1" class="@GetClassString(item)" @onclick="@(() => OnClickTabItem(item))" @onclick:preventDefault="@(!ClickTabToNavigation)">
+        <a href="@item.Url" role="tab" tabindex="-1" class="@GetClassString(item)"
+           @oncontextmenu="e => OnContextMenu(e, item)" @oncontextmenu:preventDefault="IsPreventDefault"
+           @onclick="@(() => OnClickTabItem(item))" @onclick:preventDefault="@(!ClickTabToNavigation)">
             @RenderHeaderItemContent(item)
         </a>
         @if (TabStyle == TabStyle.Chrome)

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

@@ -3,6 +3,7 @@
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
 
+using Microsoft.AspNetCore.Components.Web;
 using Microsoft.Extensions.Localization;
 using System.Collections.Concurrent;
 using System.Reflection;
@@ -370,6 +371,9 @@ public partial class Tab : IHandlerException
     [Inject, NotNull]
     private DialogService? DialogService { get; set; }
 
+    [CascadingParameter]
+    private ContextMenuZone? ContextMenuZone { get; set; }
+
     private ConcurrentDictionary<TabItem, bool> LazyTabCache { get; } = new();
 
     private bool HandlerNavigation { get; set; }
@@ -382,6 +386,8 @@ public partial class Tab : IHandlerException
 
     private readonly ConcurrentDictionary<TabItem, TabItemContent> _cache = [];
 
+    private bool IsPreventDefault => ContextMenuZone != null;
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -965,4 +971,12 @@ protected override async ValueTask DisposeAsync(bool disposing)
             ErrorLogger?.UnRegister(this);
         }
     }
+
+    private async Task OnContextMenu(MouseEventArgs e, TabItem item)
+    {
+        if (ContextMenuZone != null)
+        {
+            await ContextMenuZone.OnContextMenu(e, item);
+        }
+    }
 }

test/UnitTest/Components/TabTest.cs

@@ -7,6 +7,7 @@
 using Bunit.TestDoubles;
 using Microsoft.AspNetCore.Components.Rendering;
 using System.Reflection;
+using System.Threading.Tasks;
 using UnitTest.Misc;
 
 namespace UnitTest.Components;
@@ -25,6 +26,49 @@ protected override void ConfigureServices(IServiceCollection services)
         });
     }
 
+    [Fact]
+    public async Task ContextMenu_Ok()
+    {
+        var clicked = false;
+        var cut = Context.RenderComponent<ContextMenuZone>(pb =>
+        {
+            pb.AddChildContent<Tab>(pb =>
+            {
+                pb.AddChildContent<TabItem>(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.AddChildContent<ContextMenu>(pb =>
+            {
+                pb.AddChildContent<ContextMenuItem>(pb =>
+                {
+                    pb.Add(a => a.Text, "test-close");
+                    pb.Add(a => a.OnClick, (context, item) =>
+                    {
+                        clicked = true;
+                        if (item is TabItem tabItem)
+                        {
+
+                        }
+                        return Task.CompletedTask;
+                    });
+                });
+            });
+        });
+
+        var menuItem = cut.Find(".tabs-item");
+        await cut.InvokeAsync(() => menuItem.ContextMenu());
+
+        var item = cut.Find(".dropdown-menu .dropdown-item");
+        await cut.InvokeAsync(() => item.Click());
+        Assert.True(clicked);
+    }
+
     [Fact]
     public void ToolbarTemplate_Ok()
     {