diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml index 35a63a5652..ca78959a7d 100644 --- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml +++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml @@ -7022,7 +7022,7 @@ - Gets or sets if this item does not participate in overflow logic. + Gets or sets whether this element does not participate in overflow logic, and will always be visible. Defaults to false @@ -13734,6 +13734,26 @@ The component is oriented vertically. + + + Possibility for an element not to participate in the overflow logic and always remain displayed. + + + + + If the item is out of the display, it disappears. + + + + + The element is always visible + + + + + The element is always visible, but its width can be reduced to display "...". + + Sizes for presence badge diff --git a/examples/Demo/Shared/Pages/Overflow/Examples/OverflowDefaultExample.razor b/examples/Demo/Shared/Pages/Overflow/Examples/OverflowDefaultExample.razor index 98810144bf..77ca1d4f7d 100644 --- a/examples/Demo/Shared/Pages/Overflow/Examples/OverflowDefaultExample.razor +++ b/examples/Demo/Shared/Pages/Overflow/Examples/OverflowDefaultExample.razor @@ -16,6 +16,20 @@ Installation +

+ 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. @@ -39,3 +53,10 @@ Installation + +@code +{ + static string[] Catalog = new[] { "Blazor", "WPF", "Microsoft", "#Framework", + "Electron", "WinForms", "MAUI", "Fluent", "Reality", + "Office", "Installation", "Azure", "DevOps" }; +} diff --git a/src/Core/Components/Overflow/FluentOverflow.razor.css b/src/Core/Components/Overflow/FluentOverflow.razor.css index e3a0dde5d1..99a3b596c9 100644 --- a/src/Core/Components/Overflow/FluentOverflow.razor.css +++ b/src/Core/Components/Overflow/FluentOverflow.razor.css @@ -1,4 +1,4 @@ -.fluent-overflow[orientation="horizontal"] { +.fluent-overflow[orientation="horizontal"] { display: flex; flex-direction: row; overflow-x: hidden; @@ -19,3 +19,10 @@ .fluent-overflow ::deep > *[overflow] { display: none; } + +.fluent-overflow ::deep .fluent-overflow-item[fixed='ellipsis'] { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: fit-content; +} diff --git a/src/Core/Components/Overflow/FluentOverflowItem.razor b/src/Core/Components/Overflow/FluentOverflowItem.razor index bc12287af7..deff9317a2 100644 --- a/src/Core/Components/Overflow/FluentOverflowItem.razor +++ b/src/Core/Components/Overflow/FluentOverflowItem.razor @@ -1,6 +1,6 @@ @namespace Microsoft.FluentUI.AspNetCore.Components @inherits FluentComponentBase -

+
@ChildContent
diff --git a/src/Core/Components/Overflow/FluentOverflowItem.razor.cs b/src/Core/Components/Overflow/FluentOverflowItem.razor.cs index 8dddd4208d..ac2a29ba09 100644 --- a/src/Core/Components/Overflow/FluentOverflowItem.razor.cs +++ b/src/Core/Components/Overflow/FluentOverflowItem.razor.cs @@ -35,11 +35,11 @@ public partial class FluentOverflowItem : IDisposable public RenderFragment? ChildContent { get; set; } /// - /// Gets or sets if this item does not participate in overflow logic. + /// Gets or sets whether this element does not participate in overflow logic, and will always be visible. /// Defaults to false /// [Parameter] - public bool Fixed { get; set; } = false; + public OverflowItemFixed Fixed { get; set; } = OverflowItemFixed.None; /// /// Gets True if this component is out of panel. diff --git a/src/Core/Enums/OverflowItemFixed.cs b/src/Core/Enums/OverflowItemFixed.cs new file mode 100644 index 0000000000..5b5b710d1e --- /dev/null +++ b/src/Core/Enums/OverflowItemFixed.cs @@ -0,0 +1,31 @@ +// ------------------------------------------------------------------------ +// MIT License - Copyright (c) Microsoft Corporation. All rights reserved. +// ------------------------------------------------------------------------ + +using System.ComponentModel; + +namespace Microsoft.FluentUI.AspNetCore.Components; + +/// +/// Possibility for an element not to participate in the overflow logic and always remain displayed. +/// +public enum OverflowItemFixed +{ + /// + /// If the item is out of the display, it disappears. + /// + [Description("none")] + None = 0, + + /// + /// The element is always visible + /// + [Description("fixed")] + Fixed = 1, + + /// + /// The element is always visible, but its width can be reduced to display "...". + /// + [Description("ellipsis")] + Ellipsis = 2, +}