mirror of
https://gitee.com/LongbowEnterprise/BootstrapBlazor.git
synced 2024-12-05 05:29:47 +08:00
!777 feat(#I29OSY): TabItem add Closable property
* docs: 更新示例文档 * feat: TabItem 增加 Closable 属性
This commit is contained in:
parent
fce355d8c5
commit
c457210aba
@ -10,7 +10,7 @@
|
||||
</p>
|
||||
|
||||
<Tab ShowExtendButtons="true" ShowClose="true" @ref="TabSet2">
|
||||
<TabItem Text="用户管理">
|
||||
<TabItem Text="用户管理" Closable="false">
|
||||
<div>我是用户管理</div>
|
||||
</TabItem>
|
||||
<TabItem Text="菜单管理">
|
||||
|
@ -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">
|
||||
|
@ -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="菜单管理">
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user