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

* docs: 更新示例文档
* feat: TabItem 增加 Closable 属性
This commit is contained in:
Argo 2020-12-19 00:53:26 +08:00
parent fce355d8c5
commit c457210aba
6 changed files with 18 additions and 9 deletions

View File

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

View File

@ -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">

View File

@ -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="菜单管理">

View File

@ -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>

View File

@ -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>

View File

@ -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>