Overflow panel
Resize the area where the badges are shown in (bottom right/left corner) to hide Tags when an overflow occurs.
Examples
Horizontal
In the following example, the first element will always be displayed (fixed), but an ellipse (...) will be added when the container size is too small. Note: the element must be able to display this ellipse, which is the case for text (like below) but not for the FluentBadge.
Aspire;
Blazor;
Microsoft;
Azure;
DevOps
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
Download:
Horizontal Customized
Download:
Documentation
FluentOverflow Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
ChildContent | RenderFragment? | Gets or sets the content to display. All first HTML elements are included in the items flow. | |
IdMoreButton | string | f3a06c20e-more | Gets the unique identifier associated to the more button ([Id]-more). |
ItemsOverflow | IEnumerable<FluentOverflowItem> | Gets all items with FluentOverflowItem.Overflow assigned to True. | |
MoreButtonTemplate | RenderFragment<FluentOverflow>? | Gets or sets the template to display the More button. | |
Orientation | Orientation | Horizontal | Gets or sets the orientation of the items flow. |
OverflowTemplate | RenderFragment<FluentOverflow>? | Gets or sets the template to display FluentOverflow.ItemsOverflow elements. | |
Selectors | string? | Gets or sets the CSS selectors of the items to include in the overflow. | |
VisibleOnLoad | bool | True | To prevent a flickering effect, set this property to False to hide the overflow items until the component is fully loaded. |
EventCallbacks
Name | Type | Description |
|---|---|---|
OnOverflowRaised | EventCallback<IEnumerable<FluentOverflowItem>> | Event raised when a FluentOverflowItem enter or leave the current panel. |
Methods
Name | Parameters | Type | Description |
|---|---|---|---|
DisposeAsync | ValueTask | ||
OverflowRaisedAsync | string value | Task | |
RefreshAsync | Task |
FluentOverflowItem Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
ChildContent | RenderFragment? | Gets or sets the content to display. All first HTML elements are included in the items flow. | |
Fixed | OverflowItemFixed | None | Gets or sets whether this element does not participate in overflow logic, and will always be visible. Defaults to false |
Overflow | bool? | Gets True if this component is out of panel. | |
Owner | FluentOverflow? | Gets or sets the reference to the associated container. | |
Text | string | Gets the InnerText of FluentOverflowItem.ChildContent. |