Skip to content

feat(Tab): add Capsule style #5642

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ArgoZhang merged 6 commits into from
Mar 16, 2025
Merged

feat(Tab): add Capsule style #5642

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
139ca2f
feat: 增加 Capsule 模式
ArgoZhang Mar 16, 2025
05e1d0b
doc: 更新文档
ArgoZhang Mar 16, 2025
fdd1269
doc: 更新示例描述文字
ArgoZhang Mar 16, 2025
ff68514
test: 更新单元测试
ArgoZhang Mar 16, 2025
87ea411
chore: bump version 9.4.9
ArgoZhang Mar 16, 2025
de33e74
style: 精简样式
ArgoZhang Mar 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion src/BootstrapBlazor.Server/Components/Samples/Tabs.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -436,7 +436,7 @@ private void Navigation()
</Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["TabsChromeStyleTitle"]" Introduction="@Localizer["TabsChromeStyleIntro"]" Name="TabStyle">
<DemoBlock Title="@Localizer["TabsChromeStyleTitle"]" Introduction="@Localizer["TabsChromeStyleIntro"]" Name="Chrome">
<Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Chrome">
<TabItem Text="@Localizer["TabItem1Text"]" Icon="fa-solid fa-user">
<div>@Localizer["TabItem1Content"]</div>
Expand All @@ -453,6 +453,23 @@ private void Navigation()
</Tab>
</DemoBlock>

<DemoBlock Title="@Localizer["TabsCapsuleStyleTitle"]" Introduction="@Localizer["TabsCapsuleStyleIntro"]" Name="Capsule">
<Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Capsule">
<TabItem Text="@Localizer["TabItem1Text"]" Icon="fa-solid fa-user">
<div>@Localizer["TabItem1Content"]</div>
</TabItem>
<TabItem Text="@Localizer["TabItem2Text"]" Icon="fa-solid fa-gauge-high">
<div>@Localizer["TabItem2Content"]</div>
</TabItem>
<TabItem Text="@Localizer["TabItem3Text"]" Icon="fa-solid fa-sitemap">
<div>@Localizer["TabItem3Content"]</div>
</TabItem>
<TabItem Text="@Localizer["TabItem4Text"]" Icon="fa-solid fa-building-columns">
<div>@Localizer["TabItem4Content"]</div>
</TabItem>
</Tab>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" Title="@Localizer["AttTitle"]" />

<MethodTable Items="@GetMethods()" Title="@Localizer["MethodTitle"]" />
4 changes: 3 additions & 1 deletion src/BootstrapBlazor.Server/Locales/en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2120,7 +2120,9 @@
"TabsDisabledIntro": "Disable the current <code>TabItem</code> by setting <code>IsDisabled=\"true\"</code> to prohibit click, drag, close etc.",
"TabsChromeStyleTitle": "Chrome Style",
"TabsChromeStyleIntro": "Set the Chrome browser tab style by setting <code>TabStyle=\"TabStyle.Chrome\"</code>. Currently only supports <code>Placement=\"Placement.Top\"</code> mode",
"TabAtt2TabStyle": "Set the tab style"
"TabAtt2TabStyle": "Set the tab style",
"TabsCapsuleStyleTitle": "Capsule Style",
"TabsCapsuleStyleIntro": "Set the capsule tab style by setting <code>TabStyle=\"TabStyle.Capsule\"</code>. Currently only supports <code>Placement=\"Placement.Top\"</code> <code>Placement=\"Placement.Bottom\"</code> mode"
},
"BootstrapBlazor.Server.Components.Components.DemoTabItem": {
"Info": "Reset the title of this <code>TabItem</code> by click the button",
Expand Down
4 changes: 3 additions & 1 deletion src/BootstrapBlazor.Server/Locales/zh-CN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2120,7 +2120,9 @@
"TabsDisabledIntro": "通过设置 <code>IsDisabled=\"true\"</code> 禁用当前 <code>TabItem</code> 禁止点击、拖动、关闭等操作",
"TabsChromeStyleTitle": "Chrome 样式",
"TabsChromeStyleIntro": "通过设置 <code>TabStyle=\"TabStyle.Chrome\"</code> 设置 Chrome 浏览器标签页样式，目前仅支持 <code>Placement=\"Placement.Top\"</code> 模式",
"TabAtt2TabStyle": "设置标签页样式"
"TabAtt2TabStyle": "设置标签页样式",
"TabsCapsuleStyleTitle": "胶囊样式",
"TabsCapsuleStyleIntro": "通过设置 <code>TabStyle=\"TabStyle.Capsule\"</code> 设置标签页为胶囊样式，目前仅支持 <code>Placement=\"Placement.Top\"</code> <code>Placement=\"Placement.Bottom\"</code> 模式"
},
"BootstrapBlazor.Server.Components.Components.DemoTabItem": {
"Info": "点击下方按钮，本 <code>TabItem</code> 标题更改为当前分钟与秒",
Expand Down
2 changes: 1 addition & 1 deletion src/BootstrapBlazor/BootstrapBlazor.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<Project Sdk="Microsoft.NET.Sdk.Razor">

<PropertyGroup>
<Version>9.4.9-beta09</Version>
<Version>9.4.9</Version>
</PropertyGroup>

<ItemGroup>
Expand Down
14 changes: 10 additions & 4 deletions src/BootstrapBlazor/Components/Tab/Tab.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,8 +129,11 @@ else
<div role="tab" class="@GetClassString(item)">
@RenderHeaderContent(item)
</div>
<i class="tab-corner tab-corner-left"></i>
<i class="tab-corner tab-corner-right"></i>
@if (TabStyle == TabStyle.Chrome)
{
<i class="tab-corner tab-corner-left"></i>
<i class="tab-corner tab-corner-right"></i>
}
</div>;

RenderFragment RenderDefaultDisabledHeader(TabItem item) =>
Expand All @@ -143,8 +146,11 @@ else
<a href="@item.Url" role="tab" tabindex="-1" class="@GetClassString(item)" @onclick="@(() => OnClickTabItem(item))" @onclick:preventDefault="@(!ClickTabToNavigation)" draggable="@DraggableString">
@RenderHeaderContent(item)
</a>
<i class="tab-corner tab-corner-left"></i>
<i class="tab-corner tab-corner-right"></i>
@if (TabStyle == TabStyle.Chrome)
{
<i class="tab-corner tab-corner-left"></i>
<i class="tab-corner tab-corner-right"></i>
}
</div>;

RenderFragment RenderDefaultHeader(TabItem item) =>
Expand Down
5 changes: 3 additions & 2 deletions src/BootstrapBlazor/Components/Tab/Tab.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ public partial class Tab : IHandlerException
.AddClass($"tabs-{Placement.ToDescriptionString()}", Placement == Placement.Top || Placement == Placement.Right || Placement == Placement.Bottom || Placement == Placement.Left)
.AddClass("tabs-vertical", Placement == Placement.Left || Placement == Placement.Right)
.AddClass("tabs-chrome", TabStyle == TabStyle.Chrome)
.AddClass("tabs-capsule", TabStyle == TabStyle.Capsule)
.AddClassFromAttributes(AdditionalAttributes)
.Build();

Expand Down Expand Up @@ -878,9 +879,9 @@ public async Task DragItemCallback(int originIndex, int currentIndex)

private string? GetIdByTabItem(TabItem item) => (ShowFullScreen && item.ShowFullScreen) ? ComponentIdGenerator.Generate(item) : null;

private RenderFragment RenderDisabledHeaderByStyle(TabItem item) => TabStyle == TabStyle.Chrome ? RenderChromeDisabledHeader(item) : RenderDefaultDisabledHeader(item);
private RenderFragment RenderDisabledHeaderByStyle(TabItem item) => TabStyle == TabStyle.Default ? RenderDefaultDisabledHeader(item) : RenderChromeDisabledHeader(item);

private RenderFragment RenderHeaderByStyle(TabItem item) => TabStyle == TabStyle.Chrome ? RenderChromeHeader(item) : RenderDefaultHeader(item);
private RenderFragment RenderHeaderByStyle(TabItem item) => TabStyle == TabStyle.Default ? RenderDefaultHeader(item) : RenderChromeHeader(item);

/// <summary>
/// <inheritdoc/>
Expand Down
79 changes: 75 additions & 4 deletions src/BootstrapBlazor/Components/Tab/Tab.razor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -488,17 +488,20 @@
}
}

.tabs-chrome {
.tabs-chrome > .tabs-header {
--bb-tabs-header-bg-color: var(--bs-border-color);
--bb-tabs-item-hover-bg-color: rgba(var(--bs-body-color-rgb), 0.1);
--bb-tabs-item-active-bg-color: var(--bs-body-bg);
--bb-tabs-item-active-color: var(--bs-body-color);
--bb-tabs-item-hover-color: var(--bs-body-color);

.tabs-nav {
background-color: var(--bb-tabs-header-bg-color);
}

.tabs-item-wrap {
overflow: hidden;
position: relative;
background-color: var(--bb-tabs-header-bg-color);
display: flex;
align-items: flex-end;
flex-shrink: 0;
Expand Down Expand Up @@ -531,7 +534,6 @@
}

.tabs-item {
background-color: var(--bb-tabs-header-bg-color);
border: none !important;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
Expand Down Expand Up @@ -598,8 +600,77 @@
}
}

> .tabs-header .tabs-item-fix {
.tabs-item-fix {
border: none;
}
}

.tabs-capsule > .tabs-header {
--bb-tabs-header-bg-color: var(--bs-border-color);
--bb-tabs-item-bg-color: rgba(var(--bs-body-color-rgb), 0.08);
--bb-tabs-item-hover-bg-color: rgba(var(--bs-body-color-rgb), 0.1);
--bb-tabs-item-active-bg-color: var(--bs-body-bg);
--bb-tabs-item-active-color: var(--bs-body-color);
--bb-tabs-item-hover-color: var(--bs-body-color);

.tabs-nav {
background-color: var(--bb-tabs-header-bg-color);
}

.tabs-item-wrap {
margin-left: .5rem;

&.active {
.tabs-item {
.tabs-item-body {
background-color: var(--bb-tabs-item-active-bg-color);
}
}
}

&:not(.active) {
.tabs-item:not(.disabled) .tabs-item-body {
&:hover {
background-color: var(--bb-tabs-item-hover-bg-color);
}
}
}

.tabs-item {
padding: 0;

.tabs-item-body {
padding: 4px 10px;
display: flex;
align-items: center;
flex-wrap: nowrap;
border-radius: 14.5px;
background-color: var(--bb-tabs-item-bg-color);

.tabs-item-text {
padding: 0 .5rem;
}

.tabs-item-close {
display: flex;
position: unset;
width: 21px;
height: 21px;
border-radius: 50%;
}
}

.tabs-item-close {
display: flex;
position: unset;
width: 21px;
height: 21px;
border-radius: 50%;
}
}
}

.tabs-item-fix {
border: none;
}
}
7 changes: 6 additions & 1 deletion src/BootstrapBlazor/Enums/TabStyle.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,10 @@ public enum TabStyle
/// <summary>
/// The Chrome style
/// </summary>
Chrome
Chrome,

/// <summary>
/// The Capsule style
/// </summary>
Capsule
}
19 changes: 19 additions & 0 deletions test/UnitTest/Components/TabTest.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -470,6 +470,25 @@ public async Task TabStyle_Chrome_Ok()
Assert.Equal(TabStyle.Default, cut.Instance.TabStyle);
}

[Fact]
public void TabStyle_Capsule_Ok()
{
var cut = Context.RenderComponent<Tab>(pb =>
{
pb.Add(a => a.TabStyle, TabStyle.Capsule);
pb.AddChildContent<TabItem>(pb =>
{
pb.Add(a => a.Text, "Text1");
pb.Add(a => a.ChildContent, builder => builder.AddContent(0, "Test1"));
pb.Add(a => a.Icon, "fa fa-fa");
});
});
cut.Contains("tabs tabs-top tabs-capsule");
cut.Contains("tabs-item-wrap active");
cut.DoesNotContain("<i class=\"tab-corner tab-corner-left\"></i>");
cut.DoesNotContain("<i class=\"tab-corner tab-corner-right\"></i>");
}

[Fact]
public void MenuItem_Null()
{
Expand Down