Gets or sets the template to display the More button.
diff --git a/examples/Demo/Shared/Pages/Overflow/Examples/OverflowDefaultExample.razor b/examples/Demo/Shared/Pages/Overflow/Examples/OverflowDefaultExample.razor
index 1ef5546829..98810144bf 100644
--- a/examples/Demo/Shared/Pages/Overflow/Examples/OverflowDefaultExample.razor
+++ b/examples/Demo/Shared/Pages/Overflow/Examples/OverflowDefaultExample.razor
@@ -1,11 +1,41 @@
-
- Blazor
- Microsoft
- Azure
- DevOps
- Framework
- Office
- Installation
-
+
+ Blazor
+ Microsoft
+ Azure
+ DevOps
+ Framework
+ Office
+ Installation
+ Blazor
+ Microsoft
+ Azure
+ DevOps
+ Framework
+ Office
+ Installation
+
+
+
+ With below example the VisibleOnLoad parameter is set to false.
+ Make sure the screen dimension is small enough to show an overflow badge with count.
+ Then refresh the page to see the difference between this example and the one above
+
+
+
+ Blazor
+ Microsoft
+ Azure
+ DevOps
+ Framework
+ Office
+ Installation
+ Blazor
+ Microsoft
+ Azure
+ DevOps
+ Framework
+ Office
+ Installation
+
diff --git a/src/Core/Components/AppBar/FluentAppBar.razor.cs b/src/Core/Components/AppBar/FluentAppBar.razor.cs
index 8db3a93279..50570749db 100644
--- a/src/Core/Components/AppBar/FluentAppBar.razor.cs
+++ b/src/Core/Components/AppBar/FluentAppBar.razor.cs
@@ -79,7 +79,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
// Overflow
_jsModuleOverflow = await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE);
- await _jsModuleOverflow.InvokeVoidAsync("FluentOverflowInitialize", _dotNetHelper, Id, false, OVERFLOW_SELECTOR);
+ await _jsModuleOverflow.InvokeVoidAsync("fluentOverflowInitialize", _dotNetHelper, Id, false, OVERFLOW_SELECTOR);
}
}
diff --git a/src/Core/Components/Overflow/FluentOverflow.razor.cs b/src/Core/Components/Overflow/FluentOverflow.razor.cs
index ef95b6e358..e8ccf4119c 100644
--- a/src/Core/Components/Overflow/FluentOverflow.razor.cs
+++ b/src/Core/Components/Overflow/FluentOverflow.razor.cs
@@ -24,6 +24,7 @@ public partial class FluentOverflow : FluentComponentBase, IAsyncDisposable
///
protected string? StyleValue => new StyleBuilder(Style)
+ .AddStyle("visibility", "hidden", VisibleOnLoad == false)
.Build();
[Inject]
@@ -41,6 +42,12 @@ public partial class FluentOverflow : FluentComponentBase, IAsyncDisposable
[Parameter]
public RenderFragment? OverflowTemplate { get; set; }
+ ///
+ /// To prevent a flickering effect, set this property to False to hide the overflow items until the component is fully loaded.
+ ///
+ [Parameter]
+ public bool VisibleOnLoad { get; set; } = true;
+
///
/// Gets or sets the template to display the More button.
///
@@ -88,8 +95,16 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
{
_jsModule = await JSRuntime.InvokeAsync("import", JAVASCRIPT_FILE);
_dotNetHelper = DotNetObjectReference.Create(this);
+ await _jsModule.InvokeVoidAsync("fluentOverflowInitialize", _dotNetHelper, Id, IsHorizontal, Selectors);
+ VisibleOnLoad = true;
+ }
+ }
- await _jsModule.InvokeVoidAsync("FluentOverflowInitialize", _dotNetHelper, Id, IsHorizontal, Selectors);
+ public async Task RefreshAsync()
+ {
+ if (_jsModule is not null)
+ {
+ await _jsModule.InvokeVoidAsync("fluentOverflowRefresh", _dotNetHelper, Id, IsHorizontal, Selectors);
}
}
diff --git a/src/Core/Components/Overflow/FluentOverflow.razor.js b/src/Core/Components/Overflow/FluentOverflow.razor.js
index b3a2ad08f7..c9780817f1 100644
--- a/src/Core/Components/Overflow/FluentOverflow.razor.js
+++ b/src/Core/Components/Overflow/FluentOverflow.razor.js
@@ -1,7 +1,7 @@
let resizeObserver;
let observerAddRemove;
-export function FluentOverflowInitialize(dotNetHelper, id, isHorizontal, querySelector) {
+export function fluentOverflowInitialize(dotNetHelper, id, isHorizontal, querySelector) {
var localSelector = querySelector;
if (!localSelector) {
// cannot use :scope for node.matches() further down
@@ -23,13 +23,13 @@ export function FluentOverflowInitialize(dotNetHelper, id, isHorizontal, querySe
return;
}
- FluentOverflowResized(dotNetHelper, id, isHorizontal, querySelector);
+ fluentOverflowRefresh(dotNetHelper, id, isHorizontal, querySelector);
});
});
// Create a ResizeObserver, started later
resizeObserver = new ResizeObserver((entries) => {
- FluentOverflowResized(dotNetHelper, id, isHorizontal, querySelector);
+ fluentOverflowRefresh(dotNetHelper, id, isHorizontal, querySelector);
});
// Start the resize observation
@@ -42,7 +42,7 @@ export function FluentOverflowInitialize(dotNetHelper, id, isHorizontal, querySe
// When the Element[id] is resized, set overflow attribute to all element outside of this element.
// Except for elements with fixed attribute.
-export function FluentOverflowResized(dotNetHelper, id, isHorizontal, querySelector) {
+export function fluentOverflowRefresh(dotNetHelper, id, isHorizontal, querySelector) {
let container = document.getElementById(id); // Container
if (!container) return;
@@ -61,6 +61,8 @@ export function FluentOverflowResized(dotNetHelper, id, isHorizontal, querySelec
let containerGap = parseFloat(window.getComputedStyle(container).gap);
if (!containerGap) containerGap = 0;
+ containerMaxSize -= 25; // Account for the overflow bage width
+
// Size of all fixed elements
fixedItems.forEach(element => {
element.overflowSize = isHorizontal ? getElementWidth(element) : getElementHeight(element);
diff --git a/src/Core/Components/Tabs/FluentTabs.razor.cs b/src/Core/Components/Tabs/FluentTabs.razor.cs
index ebe9947748..0ba66b7376 100644
--- a/src/Core/Components/Tabs/FluentTabs.razor.cs
+++ b/src/Core/Components/Tabs/FluentTabs.razor.cs
@@ -149,7 +149,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
"./_content/Microsoft.FluentUI.AspNetCore.Components/Components/Overflow/FluentOverflow.razor.js");
var horizontal = Orientation == Orientation.Horizontal;
- await _jsModuleOverflow.InvokeVoidAsync("FluentOverflowInitialize", _dotNetHelper, Id, horizontal, FLUENT_TAB_TAG);
+ await _jsModuleOverflow.InvokeVoidAsync("fluentOverflowInitialize", _dotNetHelper, Id, horizontal, FLUENT_TAB_TAG);
}
}