doc: 更新示例

Author: ArgoZhang

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

@@ -498,7 +498,7 @@ private void Navigation()
 
 <DemoBlock Title="@Localizer["TabsContextMenuTitle"]" Introduction="@Localizer["TabsContextMenuIntro"]" Name="ContextMenu">
     <ContextMenuZone>
-        <Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Chrome" ShowToolbar="true">
+        <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>
@@ -513,11 +513,9 @@ private void Navigation()
             </TabItem>
         </Tab>
         <ContextMenu>
-            <ContextMenuItem Icon="fa-solid fa-xmark" Text="关闭"></ContextMenuItem>
-            <ContextMenuItem Icon="fa-solid fa-left-right" Text="关闭其他"></ContextMenuItem>
-            <ContextMenuItem Icon="fa-solid fa-angle-left" Text="关闭左侧"></ContextMenuItem>
-            <ContextMenuItem Icon="fa-solid fa-angle-right" Text="关闭右侧"></ContextMenuItem>
-            <ContextMenuItem Icon="fa-solid fa-arrows-left-right-to-line" Text="关闭全部"></ContextMenuItem>
+            <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>

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> 标题更改为当前分钟与秒",