doc(Tab): update context menu documentation (#5741)

* doc: 更新 Tab 文档

* doc: Layout 文档更新

Author: ArgoZhang

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

@@ -209,6 +209,70 @@ private AttributeItem[] GetAttributes() =>
             Type = "string?",
             ValueList = " — ",
             DefaultValue = " — "
+        },
+        new()
+        {
+            Name = nameof(BootstrapBlazor.Components.Layout.ShowTabContextMenu),
+            Description =  Localizer["Layouts_ShowTabContextMenu"],
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
+        new()
+        {
+            Name = nameof(BootstrapBlazor.Components.Layout.BeforeTabContextMenuTemplate),
+            Description =  Localizer["Layouts_BeforeTabContextMenuTemplate"],
+            Type = "RenderFragment",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = nameof(BootstrapBlazor.Components.Layout.TabContextMenuTemplate),
+            Description =  Localizer["Layouts_TabContextMenuTemplate"],
+            Type = "RenderFragment",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = nameof(BootstrapBlazor.Components.Layout.TabContextMenuRefreshIcon),
+            Description =  Localizer["Layouts_TabContextMenuRefreshIcon"],
+            Type = "string?",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = nameof(BootstrapBlazor.Components.Layout.TabContextMenuCloseIcon),
+            Description =  Localizer["Layouts_TabContextMenuCloseIcon"],
+            Type = "string?",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = nameof(BootstrapBlazor.Components.Layout.TabContextMenuCloseOtherIcon),
+            Description =  Localizer["Layouts_TabContextMenuCloseOtherIcon"],
+            Type = "string?",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = nameof(BootstrapBlazor.Components.Layout.TabContextMenuCloseAllIcon),
+            Description =  Localizer["Layouts_TabContextMenuCloseAllIcon"],
+            Type = "string?",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = nameof(BootstrapBlazor.Components.Layout.OnBeforeShowContextMenu),
+            Description =  Localizer["Layouts_OnBeforeShowContextMenu"],
+            Type = "Func<TabItem, Task<bool>>",
+            ValueList = " — ",
+            DefaultValue = " — "
         }
     ];
 }

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

@@ -500,7 +500,7 @@ private void Navigation()
     <section ignore>
         <p>@((MarkupString)Localizer["TabsContextMenuDesc"].Value)</p>
     </section>
-    <Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Chrome" ShowToolbar="true" ShowContextMenu="true">
+    <Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Chrome" ShowToolbar="true" ShowContextMenu="true" ShowContextMenuFullScreen="true">
         <TabItem Text="@Localizer["TabItem1Text"]" Icon="fa-solid fa-user">
             <div>@Localizer["TabItem1Content"]</div>
             <Counter></Counter>

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

@@ -452,6 +452,62 @@ private AttributeItem[] GetAttributes() =>
             Type = "string?",
             ValueList = " — ",
             DefaultValue = " — "
+        },
+        new()
+        {
+            Name = nameof(Tab.ShowContextMenu),
+            Description = Localizer["AttributeShowContextMenu"].Value,
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "true"
+        },
+        new()
+        {
+            Name = nameof(Tab.ContextMenuRefreshIcon),
+            Description = Localizer["AttributeContextMenuRefreshIcon"].Value,
+            Type = "string?",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = nameof(Tab.ContextMenuCloseIcon),
+            Description = Localizer["AttributeContextMenuCloseIcon"].Value,
+            Type = "string?",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = nameof(Tab.ContextMenuCloseOtherIcon),
+            Description = Localizer["AttributeContextMenuCloseOtherIcon"].Value,
+            Type = "string?",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = nameof(Tab.ContextMenuCloseAllIcon),
+            Description = Localizer["AttributeContextMenuCloseAllIcon"].Value,
+            Type = "string?",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = nameof(Tab.ContextMenuFullScreenIcon),
+            Description = Localizer["AttributeContextMenuFullScreenIcon"].Value,
+            Type = "string?",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = nameof(Tab.OnBeforeShowContextMenu),
+            Description = Localizer["AttributeOnBeforeShowContextMenu"].Value,
+            Type = "Func<TabItem, Task<bool>>",
+            ValueList = " — ",
+            DefaultValue = " — "
         }
     ];
 

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

@@ -1443,7 +1443,15 @@
     "LayoutsAppTips6": "In this example, a scroll bar appears after clicking the menu on the left to expand",
     "LayoutsAppTips7": "The available area in the right panel is all by default, which is suitable for layouts with <code>Tab</code> components. In this example, for the sake of beauty, the <code>Main</code> template has a built-in <code>div</code > And set the style to <code>style='padding: 1rem;'</code>",
     "LayoutsAppTips8": "In this example, if the scroll bar does not appear after clicking the left menu to expand, the height of the parent container will be expanded",
-    "LayoutsAppTips9": "Please refer to <a href='/tab'>Tab component</a> for practical examples of using <code>Layout</code> component and <code>Tab</code> component together"
+    "LayoutsAppTips9": "Please refer to <a href='/tab'>Tab component</a> for practical examples of using <code>Layout</code> component and <code>Tab</code> component together",
+    "ShowTabContextMenu": "whether enable tab context menu",
+    "BeforeTabContextMenuTemplate": "the template of before tab context menu",
+    "TabContextMenuTemplate": "the template of tab context menu",
+    "TabContextMenuRefreshIcon": "the icon of tab item context menu refresh button",
+    "TabContextMenuCloseIcon": "the icon of tab item context menu close button",
+    "TabContextMenuCloseOtherIcon": "the icon of tab item context menu close other button",
+    "TabContextMenuCloseAllIcon": "the icon of tab item context menu close all button",
+    "OnBeforeShowContextMenu": "before popup context menu callback"
   },
   "BootstrapBlazor.Server.Components.Samples.Footers": {
     "FootersTitle": "Footer",
@@ -2139,7 +2147,14 @@
     "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",
-    "TabsContextMenuDesc": "The disabled tab can be set by setting the <code>OnBeforeShowContextMenu</code> callback method to control whether the right-click menu is displayed according to the return value. If it is not set, the right-click menu is also displayed for the disabled tab"
+    "TabsContextMenuDesc": "The disabled tab can be set by setting the <code>OnBeforeShowContextMenu</code> callback method to control whether the right-click menu is displayed according to the return value. If it is not set, the right-click menu is also displayed for the disabled tab",
+    "AttributeShowContextMenu": "whether enable tab context menu",
+    "AttributeContextMenuRefreshIcon": "the icon of tab item context menu refresh button",
+    "AttributeContextMenuCloseIcon": "the icon of tab item context menu close button",
+    "AttributeContextMenuCloseOtherIcon": "the icon of tab item context menu close other button",
+    "AttributeContextMenuCloseAllIcon": "the icon of tab item context menu close all button",
+    "AttributeContextMenuFullScreenIcon": "the icon of tab item context menu full screen button",
+    "AttributeOnBeforeShowContextMenu": "before popup context menu callback"
   },
   "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

@@ -1443,7 +1443,15 @@
     "LayoutsAppTips6": "本例点击左侧菜单展开后出现滚动条",
     "LayoutsAppTips7": "右侧面板中可用区域默认为全部，适用于带 <code>Tab</code> 组件的布局，本例中为了美观 <code>Main</code> 模板中内置了一个 <code>div</code> 并且设置样式为 <code>style='padding: 1rem;'</code>",
     "LayoutsAppTips8": "本例点击左侧菜单展开后不出现滚动条会撑开父容器高度",
-    "LayoutsAppTips9": " <code>Layout</code> 组件与 <code>Tab</code> 组件配合使用实战示例请参阅 <a href='/tab'>Tab 组件</a>"
+    "LayoutsAppTips9": " <code>Layout</code> 组件与 <code>Tab</code> 组件配合使用实战示例请参阅 <a href='/tab'>Tab 组件</a>",
+    "ShowTabContextMenu": "是否显示右键菜单",
+    "BeforeTabContextMenuTemplate": "前面右键菜单模板",
+    "TabContextMenuTemplate": "右键菜单后续模板",
+    "TabContextMenuRefreshIcon": "右键菜单刷新按钮图标",
+    "TabContextMenuCloseIcon": "右键菜单关闭按钮图标",
+    "TabContextMenuCloseOtherIcon": "右键菜单关闭其他按钮图标",
+    "TabContextMenuCloseAllIcon": "右键菜单关闭全部按钮图标",
+    "OnBeforeShowContextMenu": "右键菜单弹出前回调方法"
   },
   "BootstrapBlazor.Server.Components.Samples.Footers": {
     "FootersTitle": "Footer 页脚组件",
@@ -2139,7 +2147,14 @@
     "ContextCloseAll": "关闭全部",
     "TabsContextMenuTitle": "右键菜单",
     "TabsContextMenuIntro": "通过内置 <code>ContextMenuZone</code> 组件，点击标签页右键时弹窗自定义右键菜单",
-    "TabsContextMenuDesc": "被禁用的标签页可以通过设置 <code>OnBeforeShowContextMenu</code> 回调方法根据返回值控制右键菜单是否显示，未设置时禁用标签页也显示右键菜单"
+    "TabsContextMenuDesc": "被禁用的标签页可以通过设置 <code>OnBeforeShowContextMenu</code> 回调方法根据返回值控制右键菜单是否显示，未设置时禁用标签页也显示右键菜单",
+    "AttributeShowContextMenu": "是否显示右键菜单",
+    "AttributeContextMenuRefreshIcon": "右键菜单刷新按钮图标",
+    "AttributeContextMenuCloseIcon": "右键菜单关闭按钮图标",
+    "AttributeContextMenuCloseOtherIcon": "右键菜单关闭其他按钮图标",
+    "AttributeContextMenuCloseAllIcon": "右键菜单关闭全部按钮图标",
+    "AttributeContextMenuFullScreenIcon": "右键菜单全屏按钮图标",
+    "AttributeOnBeforeShowContextMenu": "右键菜单弹出前回调方法"
   },
   "BootstrapBlazor.Server.Components.Components.DemoTabItem": {
     "Info": "点击下方按钮，本 <code>TabItem</code> 标题更改为当前分钟与秒",