From 6af273d93a48e0e46f3c2e640f339588da55d4b7 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Fri, 11 Jul 2025 14:00:58 +0200 Subject: [PATCH 1/2] Implement proper tab sizing --- .../Microsoft.FluentUI.AspNetCore.Components.xml | 13 +++++++++++++ .../Shared/Pages/Tabs/Examples/TabsDefault.razor | 14 +++++++++++--- src/Core/Components/Tabs/FluentTab.razor.css | 14 ++++++++++++++ src/Core/Components/Tabs/FluentTabs.razor.cs | 9 +++++---- 4 files changed, 43 insertions(+), 7 deletions(-) diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml index 1f48fe52e7..754f3bf124 100644 --- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml +++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml @@ -7744,6 +7744,19 @@ Gets or sets a callback that is triggered whenever changes. + + + + + + Determines whether the current URI should match the link. + + The absolute URI of the current location. + True if the link should be highlighted as active; otherwise, false. + + + + Gets or sets the content to be rendered for the collapse icon when the menu is collapsible. diff --git a/examples/Demo/Shared/Pages/Tabs/Examples/TabsDefault.razor b/examples/Demo/Shared/Pages/Tabs/Examples/TabsDefault.razor index 455c6597e2..ce13748717 100644 --- a/examples/Demo/Shared/Pages/Tabs/Examples/TabsDefault.razor +++ b/examples/Demo/Shared/Pages/Tabs/Examples/TabsDefault.razor @@ -1,9 +1,15 @@ -Use deferred loading + + +Use deferred loading

If checked, the contents of Tab two and three will be loaded after 1 second of processing (to simulate a long running process).

- + + + Tab one content. This is for testing. @@ -36,7 +42,7 @@ If checked, the contents of Tab two and three will be loaded after 1 second of p

Active tab changed to: @changedto?.Label

Vertical

- + Tab one content. This is for testing. @@ -51,6 +57,8 @@ If checked, the contents of Tab two and three will be loaded after 1 second of p @code { bool DeferredLoading = false; + TabSize size; + string? activeid = "tab-3"; FluentTab? changedto; diff --git a/src/Core/Components/Tabs/FluentTab.razor.css b/src/Core/Components/Tabs/FluentTab.razor.css index 0a6885c839..e7fa1b1e26 100644 --- a/src/Core/Components/Tabs/FluentTab.razor.css +++ b/src/Core/Components/Tabs/FluentTab.razor.css @@ -39,3 +39,17 @@ fluent-tab { ::deep fluent-tab[aria-selected="true"] { font-variation-settings: normal; } + +fluent-tabs fluent-tab-panel { + --density: 0; +} + +fluent-tabs:has(.medium) fluent-tab { + font-size: var(--type-ramp-base-font-size); + padding: 0 10px; +} + +fluent-tabs:has(.large) fluent-tab { + font-size: var(--type-ramp-plus-1-font-size); + padding: 0 16px; +} diff --git a/src/Core/Components/Tabs/FluentTabs.razor.cs b/src/Core/Components/Tabs/FluentTabs.razor.cs index 9dd440648c..db1592aee2 100644 --- a/src/Core/Components/Tabs/FluentTabs.razor.cs +++ b/src/Core/Components/Tabs/FluentTabs.razor.cs @@ -23,13 +23,14 @@ public partial class FluentTabs : FluentComponentBase /// protected string? ClassValue => new CssBuilder(Class) + .AddClass(Size.ToAttributeValue(), Size != TabSize.Small) + .AddClass(Orientation.ToAttributeValue(), Orientation == Orientation.Vertical) .Build(); /// protected string? StyleValue => new StyleBuilder(Style) - .AddStyle("padding", "6px", () => Size == TabSize.Small) - .AddStyle("padding", "12px 10px", () => Size == TabSize.Medium) - .AddStyle("padding", "16px 10px", () => Size == TabSize.Large) + .AddStyle("--density", "2", () => Size == TabSize.Medium) + .AddStyle("--density", "4", () => Size == TabSize.Large) .AddStyle("width", Width, () => !string.IsNullOrEmpty(Width)) .AddStyle("height", Height, () => !string.IsNullOrEmpty(Height)) .Build(); @@ -79,7 +80,7 @@ public partial class FluentTabs : FluentComponentBase /// Gets or sets the width of the tab items. /// [Parameter] - public TabSize? Size { get; set; } = TabSize.Medium; + public TabSize? Size { get; set; } = TabSize.Small; /// /// Gets or sets the width of the tabs component. From 2166de42514942fb345238a5afb858bdc423f410 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Fri, 11 Jul 2025 15:42:44 +0200 Subject: [PATCH 2/2] Fix styling --- .../Microsoft.FluentUI.AspNetCore.Components.xml | 13 ------------- src/Core/Components/Tabs/FluentTab.razor.css | 5 +++-- 2 files changed, 3 insertions(+), 15 deletions(-) diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml index 754f3bf124..1f48fe52e7 100644 --- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml +++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml @@ -7744,19 +7744,6 @@ Gets or sets a callback that is triggered whenever changes. - - - - - - Determines whether the current URI should match the link. - - The absolute URI of the current location. - True if the link should be highlighted as active; otherwise, false. - - - - Gets or sets the content to be rendered for the collapse icon when the menu is collapsible. diff --git a/src/Core/Components/Tabs/FluentTab.razor.css b/src/Core/Components/Tabs/FluentTab.razor.css index e7fa1b1e26..ba81c78e17 100644 --- a/src/Core/Components/Tabs/FluentTab.razor.css +++ b/src/Core/Components/Tabs/FluentTab.razor.css @@ -44,12 +44,13 @@ fluent-tabs fluent-tab-panel { --density: 0; } -fluent-tabs:has(.medium) fluent-tab { + +fluent-tabs.medium fluent-tab { font-size: var(--type-ramp-base-font-size); padding: 0 10px; } -fluent-tabs:has(.large) fluent-tab { +fluent-tabs.large fluent-tab { font-size: var(--type-ramp-plus-1-font-size); padding: 0 16px; }