!777 feat(#I29OSY): TabItem add Closable property

* docs: 更新示例文档
* feat: TabItem 增加 Closable 属性

src/BootstrapBlazor.Docs/wwwroot/docs/tabs/tabs.10.html

@@ -10,7 +10,7 @@
 </p>
 
 <Tab ShowExtendButtons="true" ShowClose="true" @ref="TabSet2">
-    <TabItem Text="用户管理">
+    <TabItem Text="用户管理" Closable="false">
         <div>我是用户管理</div>
     </TabItem>
     <TabItem Text="菜单管理">

src/BootstrapBlazor.Docs/wwwroot/docs/tabs/tabs.8.html

@@ -1,5 +1,5 @@
 <Tab IsCard="true" ShowClose="true">
-    <TabItem Text="用户管理" Icon="fa fa-user">
+    <TabItem Text="用户管理" Icon="fa fa-user" Closable="false">
         <div>我是用户管理</div>
     </TabItem>
     <TabItem Text="菜单管理" Icon="fa fa-dashboard">

src/BootstrapBlazor.Shared/Pages/Tabs.razor

@@ -77,8 +77,11 @@
 </Block>
 
 <Block Title="关闭" Introduction='通过设置 <code>ShowClose</code> 属性对标签页显示关闭按钮' CodeFile="tabs.8.html">
+    <Tips>
+        <p><code>Tab</code> 组件开启 <code>ShowClose</code> 后，<code>TabItem</code> 属性 <code>Closable</code> 可对标签页单独设置是否可关闭，默认为 <code>true</code>；本例中 <b>用户管理</b> 标签页不提供关闭功能</p>
+    </Tips>
     <Tab IsCard="true" ShowClose="true">
-        <TabItem Text="用户管理" Icon="fa fa-user">
+        <TabItem Text="用户管理" Icon="fa fa-user" Closable="false">
             <div>我是用户管理</div>
         </TabItem>
         <TabItem Text="菜单管理" Icon="fa fa-dashboard">
@@ -233,7 +236,7 @@
 </Block>
 
 <Block Title="实战 Tab 组件" Introduction="通过设置 <code>ShowExtendButtons</code> 属性为 <code>true</code>，开启组件左右移动按钮与关闭下拉菜单，实战中非常实用" CodeFile="tabs.10.html">
-    <Tips>通过 <b>添加</b> <b>删除</b> 按钮动态调整 <code>TabItem</code> 数量，使其超出容器数量查看，左右移动效果</Tips>
+    <Tips>通过 <b>添加</b> <b>删除</b> 按钮动态调整 <code>TabItem</code> 数量，使其超出容器数量查看，左右移动效果；<b>用户管理</b> 设置为不可关闭；功能按钮无法关闭这个标签页</Tips>
     <p>
         <button type="button" class="btn btn-outline-primary" @onclick="@(e => AddTab(TabSet2))">
             <i class="fa fa-plus-circle"></i>
@@ -245,7 +248,7 @@
         </button>
     </p>
     <Tab ShowExtendButtons="true" ShowClose="true" @ref="TabSet2">
-        <TabItem Text="用户管理">
+        <TabItem Text="用户管理" Closable="false">
             <div>我是用户管理</div>
         </TabItem>
         <TabItem Text="菜单管理">

src/BootstrapBlazor/Components/Tab/Tab.razor

@@ -37,7 +37,7 @@
                                     <i class="@GetIconClassString(item.Icon)"></i>
                                 }
                                 <span class="tabs-item-text">@item.Text</span>
-                                @if (ShowClose)
+                                @if (ShowClose && item.Closable)
                                 {
                                     <span class="tabs-item-close" @onclick:stopPropagation @onclick="@(e => Remove(item))">
                                         <i class="fa fa-fw fa-close"></i>

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

@@ -329,7 +329,7 @@ namespace BootstrapBlazor.Components
         /// </summary>
         private void CloseAllTab()
         {
-            _items.Clear();
+            _items.RemoveAll(t => t.Closable);
         }
 
         /// <summary>
@@ -338,7 +338,7 @@ namespace BootstrapBlazor.Components
         private async Task CloseCurrentTab()
         {
             var tab = _items.FirstOrDefault(t => t.IsActive);
-            if (tab != null) await Remove(tab);
+            if (tab != null && tab.Closable) await Remove(tab);
         }
 
         /// <summary>
@@ -346,7 +346,7 @@ namespace BootstrapBlazor.Components
         /// </summary>
         private void CloseOtherTab()
         {
-            _items.RemoveAll(t => !t.IsActive);
+            _items.RemoveAll(t => t.Closable && !t.IsActive);
         }
 
         /// <summary>

src/BootstrapBlazor/Components/Tab/TabItem.cs

@@ -35,6 +35,12 @@ namespace BootstrapBlazor.Components
         [Parameter]
         public bool IsActive { get; set; }
 
+        /// <summary>
+        /// 获得/设置 当前 TabItem 是否可关闭 默认为 true 可关闭
+        /// </summary>
+        [Parameter]
+        public bool Closable { get; set; } = true;
+
         /// <summary>
         /// 获得/设置 图标字符串 如 "fa fa"
         /// </summary>