refactor: 增加提示栏

Author: ArgoZhang

src/BootstrapBlazor/Components/Tab/Tab.razor

@@ -20,9 +20,11 @@ else
                 @if (ShowNavigatorButtons)
                 {
                     <div class="nav-link-bar left">
-                        <div class="nav-link-bar-button" @onclick="@ClickPrevTab">
-                            <i class="@PreviousIcon"></i>
-                        </div>
+                        <Tooltip Title="@PrevTabNavLinkTooltipText" Placement="Placement.Bottom" Trigger="hover">
+                            <div class="nav-link-bar-button" @onclick="@ClickPrevTab">
+                                <i class="@PreviousIcon"></i>
+                            </div>
+                        </Tooltip>
                     </div>
                 }
                 <div class="tabs-nav-scroll">
@@ -107,15 +109,19 @@ else
                     @if (ShowNavigatorButtons)
                     {
                         <div class="nav-link-bar right">
-                            <div class="nav-link-bar-button" @onclick="@ClickPrevTab">
-                                <i class="@NextIcon"></i>
-                            </div>
+                            <Tooltip Title="@NextTabNavLinkTooltipText" Placement="Placement.Bottom" Trigger="hover">
+                                <div class="nav-link-bar-button" @onclick="@ClickPrevTab">
+                                    <i class="@NextIcon"></i>
+                                </div>
+                            </Tooltip>
                         </div>
                     }
                     @if (ShouldShowExtendButtons())
                     {
                         <div class="nav-link-bar dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                            <div class="nav-link-bar-button nav-link-close"><i class="@DropdownIcon"></i></div>
+                            <Tooltip Title="@CloseTabNavLinkTooltipText" Placement="Placement.Left" Trigger="hover">
+                                <div class="nav-link-bar-button nav-link-close"><i class="@DropdownIcon"></i></div>
+                            </Tooltip>
                         </div>
                         <div class="dropdown-menu dropdown-menu-end shadow">
                             <div class="dropdown-item" @onclick="@CloseCurrentTab"><span>@CloseCurrentTabText</span></div>

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

@@ -167,7 +167,6 @@ public partial class Tab : IHandlerException
     /// 获得/设置 NotFound 标签文本 默认 null NET6.0/7.0 有效
     /// </summary>
     [Parameter]
-    [NotNull]
     public string? NotFoundTabText { get; set; }
 
     /// <summary>
@@ -205,21 +204,18 @@ public partial class Tab : IHandlerException
     /// 获得/设置 关闭当前 TabItem 菜单文本
     /// </summary>
     [Parameter]
-    [NotNull]
     public string? CloseCurrentTabText { get; set; }
 
     /// <summary>
     /// 获得/设置 关闭所有 TabItem 菜单文本
     /// </summary>
     [Parameter]
-    [NotNull]
     public string? CloseAllTabsText { get; set; }
 
     /// <summary>
     /// 获得/设置 关闭其他 TabItem 菜单文本
     /// </summary>
     [Parameter]
-    [NotNull]
     public string? CloseOtherTabsText { get; set; }
 
     /// <summary>
@@ -345,6 +341,24 @@ public partial class Tab : IHandlerException
     [Parameter]
     public Func<Task>? OnToolbarRefreshCallback { get; set; }
 
+    /// <summary>
+    /// Gets or sets the previous tab navigation link tooltip text. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? PrevTabNavLinkTooltipText { get; set; }
+
+    /// <summary>
+    /// Gets or sets the next tab navigation link tooltip text. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? NextTabNavLinkTooltipText { get; set; }
+
+    /// <summary>
+    /// Gets or sets the close tab navigation link tooltip text. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? CloseTabNavLinkTooltipText { get; set; }
+
     [CascadingParameter]
     private Layout? Layout { get; set; }
 
@@ -415,6 +429,9 @@ protected override void OnParametersSet()
         NotFoundTabText ??= Localizer[nameof(NotFoundTabText)];
         RefreshToolbarTooltipText ??= Localizer[nameof(RefreshToolbarTooltipText)];
         FullscreenToolbarTooltipText ??= Localizer[nameof(FullscreenToolbarTooltipText)];
+        PrevTabNavLinkTooltipText ??= Localizer[nameof(PrevTabNavLinkTooltipText)];
+        NextTabNavLinkTooltipText ??= Localizer[nameof(NextTabNavLinkTooltipText)];
+        CloseTabNavLinkTooltipText ??= Localizer[nameof(CloseTabNavLinkTooltipText)];
 
         PreviousIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabPreviousIcon);
         NextIcon ??= IconTheme.GetIconByKey(ComponentIcons.TabNextIcon);

src/BootstrapBlazor/Components/Tab/Tab.razor.scss

@@ -564,6 +564,12 @@
                 background-color: var(--bb-tabs-item-hover-bg-color);
             }
         }
+
+        > [data-bs-toggle="tooltip"] {
+            height: 100%;
+            display: flex;
+            align-items: center;
+        }
     }
 }
 

src/BootstrapBlazor/Locales/en.json

@@ -175,7 +175,10 @@
     "CloseAllTabsText": "Close All",
     "NotFoundTabText": "NotFound",
     "RefreshToolbarTooltipText": "Refresh",
-    "FullscreenToolbarTooltipText": "Fullscreen"
+    "FullscreenToolbarTooltipText": "Fullscreen",
+    "PrevTabNavLinkTooltipText": "Prev Tab",
+    "NextTabNavLinkTooltipText": "Next Tab",
+    "CloseTabNavLinkTooltipText": "Close"
   },
   "BootstrapBlazor.Components.MultiFilter": {
     "MultiFilterSearchPlaceHolderText": "Please enter ...",

src/BootstrapBlazor/Locales/zh.json

@@ -175,7 +175,10 @@
     "CloseAllTabsText": "关闭所有标签",
     "NotFoundTabText": "未找到",
     "RefreshToolbarTooltipText": "刷新",
-    "FullscreenToolbarTooltipText": "全屏"
+    "FullscreenToolbarTooltipText": "全屏",
+    "PrevTabNavLinkTooltipText": "上一个标签",
+    "NextTabNavLinkTooltipText": "下一个标签",
+    "CloseTabNavLinkTooltipText": "关闭"
   },
   "BootstrapBlazor.Components.MultiFilter": {
     "MultiFilterSearchPlaceHolderText": "请输入 ...",