diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml index 8c85e227a2..854b8cca2d 100644 --- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml +++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml @@ -8482,6 +8482,12 @@ Gets or sets a value indicating whether the active indicator is displayed. + + + Gets or sets whether tabs can overflow + Default is set to true to maintain original behavior. + + Gets or sets the content to be rendered inside the component. diff --git a/examples/Demo/Shared/Pages/NumberField/NumberFieldPage.razor b/examples/Demo/Shared/Pages/NumberField/NumberFieldPage.razor index d202ef3da5..1e756683d3 100644 --- a/examples/Demo/Shared/Pages/NumberField/NumberFieldPage.razor +++ b/examples/Demo/Shared/Pages/NumberField/NumberFieldPage.razor @@ -13,6 +13,20 @@ Fluent UI design system.

+
+

+ Note: The underlying web component is known to have quite some issues + which won't get fixed (and can't be fixed on out side). Be carefull when choosing to use this component. +

+

+ Also, we'd advise in general to not use a NumberField for this kind of input See also this article for reasons and alternatives +

+

+ As an alternative, you could consider using a standard InputNumber with styling applied. +

+
+ +

Examples

diff --git a/src/Core/Components/Tabs/FluentTabs.razor b/src/Core/Components/Tabs/FluentTabs.razor index 0345d1631d..2f092903ef 100644 --- a/src/Core/Components/Tabs/FluentTabs.razor +++ b/src/Core/Components/Tabs/FluentTabs.razor @@ -1,6 +1,9 @@ @namespace Microsoft.FluentUI.AspNetCore.Components @inherits FluentComponentBase - +@{ + var _overflow = TabsOverflow; +} + @ChildContent - @if (TabsOverflow.Any()) + @if (_overflow.Any()) { - @($"+{TabsOverflow.Count()}") + @($"+{_overflow.Count()}") } - @if (TabsOverflow.Any()) + @if (_overflow.Any()) { - @foreach (var item in TabsOverflow) + @foreach (var item in _overflow) { } diff --git a/src/Core/Components/Tabs/FluentTabs.razor.cs b/src/Core/Components/Tabs/FluentTabs.razor.cs index 75d496d4b1..eb376395eb 100644 --- a/src/Core/Components/Tabs/FluentTabs.razor.cs +++ b/src/Core/Components/Tabs/FluentTabs.razor.cs @@ -142,7 +142,6 @@ protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { - _dotNetHelper = DotNetObjectReference.Create(this); // Overflow _jsModuleOverflow = await JSRuntime.InvokeAsync("import", @@ -162,7 +161,6 @@ private async Task HandleOnTabChangedAsync(TabChangeEventArgs args) ActiveTabId = tabId; await ActiveTabIdChanged.InvokeAsync(tabId); } - } internal int RegisterTab(FluentTab tab) @@ -238,7 +236,7 @@ public async Task OverflowRaisedAsync(string value) private async Task ResizeTabsForOverflowButtonAsync() { var horizontal = Orientation == Orientation.Horizontal; - await _jsModuleOverflow.InvokeVoidAsync("fluentOverflowResized", _dotNetHelper, Id, horizontal, FLUENT_TAB_TAG); + await _jsModuleOverflow.InvokeVoidAsync("fluentOverflowRefresh", _dotNetHelper, Id, horizontal, FLUENT_TAB_TAG); } ///