Skip to content

Commit fe4f050

Browse files
ArgoZhangEliasIsmail
ArgoZhang
and
EliasIsmail
authored
feat(Tab): add IsDisabled parameter (#5200)
* feat: 增加 IsDisabled 参数 * style: 更新样式 * refactor: 禁止关闭 * doc: 更新示例 * refactor: 增加 SetDisabled 方法 * doc: 更新示例 * doc: 更新示例文档 * refactor: 精简逻辑 * doc: 更新示例 * test: 更新单元测试 * refactor: 增加 SetDisabledItem 实例方法 * doc: 更新示例 * test: 更新单元测试 * chore: bump version Co-Authored-By: EliasIsmail <[email protected]> * chore: bump version 9.2.9-beta05 --------- Co-authored-by: EliasIsmail <[email protected]>
1 parent 4dc56bb commit fe4f050

File tree

13 files changed

+177
-6
lines changed

13 files changed

+177
-6
lines changed

‎src/BootstrapBlazor.Server/Components/Components/TabItemContentDemo.razor‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div>
2+
<Button Text="Disabled" OnClickWithoutRender="OnToggleDisable"></Button>
3+
</div>

‎src/BootstrapBlazor.Server/Components/Components/TabItemContentDemo.razor.cs‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the Apache 2.0 License
3+
// See the LICENSE file in the project root for more information.
4+
// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
5+
6+
namespace BootstrapBlazor.Server.Components.Components;
7+
8+
/// <summary>
9+
/// TabItemContentDemo 组件
10+
/// </summary>
11+
public partial class TabItemContentDemo
12+
{
13+
[CascadingParameter]
14+
[NotNull]
15+
private TabItem? TabItem { get; set; }
16+
17+
private Task OnToggleDisable()
18+
{
19+
TabItem.SetDisabled(true);
20+
return Task.CompletedTask;
21+
}
22+
}

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,27 @@ private void Navigation()
160160
</Tab>
161161
</DemoBlock>
162162

163+
<DemoBlock Title="@Localizer["TabsDisabledTitle"]" Introduction="@Localizer["TabsDisabledIntro"]" Name="IsDisabled">
164+
<section ignore>
165+
<Button Text="@DisableText" OnClick="OnToggleDisable"></Button>
166+
</section>
167+
<Tab IsCard="true" ShowClose="true">
168+
<TabItem Text="@Localizer["TabItem1Text"]" Icon="fa-solid fa-user" IsDisabled="@Disabled">
169+
<div>@Localizer["TabItem1Content"]</div>
170+
</TabItem>
171+
<TabItem Text="@Localizer["TabItem2Text"]" Icon="fa-solid fa-gauge-high">
172+
<div>@Localizer["TabItem2Content"]</div>
173+
<TabItemContentDemo></TabItemContentDemo>
174+
</TabItem>
175+
<TabItem Text="@Localizer["TabItem3Text"]" Icon="fa-solid fa-sitemap">
176+
<div>@Localizer["TabItem3Content"]</div>
177+
</TabItem>
178+
<TabItem Text="@Localizer["TabItem4Text"]" Icon="fa-solid fa-building-columns">
179+
<div>@Localizer["TabItem4Content"]</div>
180+
</TabItem>
181+
</Tab>
182+
</DemoBlock>
183+
163184
<DemoBlock Title="@Localizer["TabsPlacementTitle"]" Introduction="@Localizer["TabsPlacementIntro"]" Name="Placement">
164185
<p class="text-center">
165186
<div class="btn-group">

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@ public sealed partial class Tabs
3333

3434
private string TabItemText { get; set; } = "Test";
3535

36+
private bool Disabled { get; set; } = true;
37+
38+
private string DisableText { get; set; } = "Enable";
39+
3640
private void SetPlacement(Placement placement)
3741
{
3842
BindPlacement = placement;
@@ -70,6 +74,13 @@ private static async Task RemoveTab(Tab tabset)
7074
}
7175
}
7276

77+
private void OnToggleDisable()
78+
{
79+
Disabled = !Disabled;
80+
81+
DisableText = Disabled ? "Enable" : "Disable";
82+
}
83+
7384
/// <summary>
7485
/// OnAfterRenderAsync
7586
/// </summary>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2100,7 +2100,9 @@
21002100
"AttributeNotAuthorized": "The template for NotAuthorized",
21012101
"AttributeNotFound": "The template for NotFound",
21022102
"AttributeExcludeUrls": "Exclude address support for wildcards",
2103-
"AttributeButtonTemplate": "The template for Buttons"
2103+
"AttributeButtonTemplate": "The template for Buttons",
2104+
"TabsDisabledTitle": "Disabled",
2105+
"TabsDisabledIntro": "Disable the current <code>TabItem</code> by setting <code>IsDisabled=\"true\"</code> to prohibit click, drag, close etc."
21042106
},
21052107
"BootstrapBlazor.Server.Components.Components.DemoTabItem": {
21062108
"Info": "Reset the title of this <code>TabItem</code> by click the button",

‎src/BootstrapBlazor.Server/Locales/zh-CN.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2100,7 +2100,9 @@
21002100
"AttributeNotAuthorized": "NotAuthorized 模板",
21012101
"AttributeNotFound": "NotFound 模板",
21022102
"AttributeExcludeUrls": "排除地址支持通配符",
2103-
"AttributeButtonTemplate": "按钮模板"
2103+
"AttributeButtonTemplate": "按钮模板",
2104+
"TabsDisabledTitle": "禁用",
2105+
"TabsDisabledIntro": "通过设置 <code>IsDisabled=\"true\"</code> 禁用当前 <code>TabItem</code> 禁止点击、拖动、关闭等操作"
21042106
},
21052107
"BootstrapBlazor.Server.Components.Components.DemoTabItem": {
21062108
"Info": "点击下方按钮，本 <code>TabItem</code> 标题更改为当前分钟与秒",

‎src/BootstrapBlazor/BootstrapBlazor.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<Project Sdk="Microsoft.NET.Sdk.Razor">
22

33
<PropertyGroup>
4-
<Version>9.2.9-beta04</Version>
4+
<Version>9.2.9-beta05</Version>
55
</PropertyGroup>
66

77
<ItemGroup>

‎src/BootstrapBlazor/Components/Tab/Tab.razor‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ else
3333
{
3434
if (!Items.Any(t => t.IsActive))
3535
{
36-
Items.FirstOrDefault()?.SetActive(true);
36+
Items.FirstOrDefault(i => i.IsDisabled == false)?.SetActive(true);
3737
}
3838
}
3939
@foreach (var item in Items)
@@ -42,6 +42,16 @@ else
4242
{
4343
@item.HeaderTemplate(item)
4444
}
45+
else if (item.IsDisabled)
46+
{
47+
<div role="tab" class="@GetClassString(item)">
48+
@if (!string.IsNullOrEmpty(item.Icon))
49+
{
50+
<i class="@GetIconClassString(item.Icon)"></i>
51+
}
52+
<span class="tabs-item-text">@item.Text</span>
53+
</div>
54+
}
4555
else
4656
{
4757
<a @key="item" href="@item.Url" role="tab" tabindex="-1" class="@GetClassString(item)" @onclick="@(() => OnClickTabItem(item))" @onclick:preventDefault="@(!ClickTabToNavigation)" draggable="@DraggableString">

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ public partial class Tab : IHandlerException
2626

2727
private string? GetClassString(TabItem item) => CssBuilder.Default("tabs-item")
2828
.AddClass("active", item.IsActive)
29+
.AddClass("disabled", item.IsDisabled)
2930
.AddClass(item.CssClass)
3031
.AddClass("is-closeable", ShowClose)
3132
.Build();
@@ -745,8 +746,24 @@ private void ActiveTabItem(TabItem item)
745746
item.SetActive(true);
746747
}
747748

749+
/// <summary>
750+
/// 设置 TabItem 禁用状态
751+
/// </summary>
752+
/// <param name="item"></param>
753+
/// <param name="disabled"></param>
754+
public void SetDisabledItem(TabItem item, bool disabled)
755+
{
756+
item.SetDisabledWithoutRender(disabled);
757+
StateHasChanged();
758+
}
759+
748760
private RenderFragment RenderTabItemContent(TabItem item) => builder =>
749761
{
762+
if (item.IsDisabled)
763+
{
764+
return;
765+
}
766+
750767
if (item.IsActive)
751768
{
752769
var content = _errorContent ?? item.ChildContent;

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
--bb-tabs-item-height: #{$bb-tabs-item-height};
44
--bb-tabs-item-active-color: #{$bb-tabs-item-active-color};
55
--bb-tabs-item-hover-color: #{$bb-tabs-item-hover-color};
6+
--bb-tabs-item-disabled-opacity: #{$bb-tabs-item-disabled-opacity};
67
--bb-tabs-border-card-top-item-margin-top: #{$bb-tabs-border-card-top-item-margin-top};
78
--bb-tabs-bar-width: #{$bb-tabs-bar-width};
89
--bb-tabs-bar-height: #{$bb-tabs-bar-height};
@@ -170,10 +171,14 @@
170171
color: var(--bb-tabs-item-active-color);
171172
}
172173

173-
.tabs-item:hover {
174+
.tabs-item:not(.disabled):hover {
174175
color: var(--bb-tabs-item-hover-color);
175176
}
176177

178+
.tabs-item.disabled {
179+
opacity: var(--bb-tabs-item-disabled-opacity);
180+
}
181+
177182
.tabs-item .tabs-item-text {
178183
padding: 0 0.25rem;
179184
pointer-events: none;

0 commit comments

Comments
 (0)