OverflowSet

Description

The OverflowSet component is a container designed to manage a set of UI items that may overflow the available display space. It automatically computes item widths and, when necessary, collapses excess items into an overflow menu (shown as a chevron button). Use this component when you need to display a dynamic list of elements that must adapt to constrained widths.

Usage

Instantiate the OverflowSet using the fluent interface provided by Tesserae.UI. Items can be added using the Items() method, which accepts multiple IComponent instances. The component automatically adds separators between items. Configure properties such as the overflow index or switch to a small variant using dedicated methods or properties.

Below is a minimal example demonstrating how to create an OverflowSet with several button items:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var msg = TextBlock().Var(out var message);

            // Create an OverflowSet populated with buttons.
            var overflowSet = OverflowSet()
                .PaddingTop(16.px())
                .PB(16)
                .Items(
                    Button("Folder 1").Link().OnClick((s, e) => message.Text("Folder 1")),
                    Button("Folder 2").Link().OnClick((s, e) => message.Text("Folder 2")).Disabled(),
                    Button("Folder 3").Link().OnClick((s, e) => message.Text("Folder 3")),
                    Button("Folder 4").Link().OnClick((s, e) => message.Text("Folder 4")),
                    Button("Folder 5").Link().OnClick((s, e) => message.Text("Folder 5")),
                    Button("Folder 6").Link().OnClick((s, e) => message.Text("Folder 6"))
                );

            // Render the OverflowSet on the page
            document.body.appendChild(overflowSet.Render());
            document.body.style.overflow = "hidden";
            MountCenteredToBody(overflowSet);
        }
    }

}

Methods

• JustifyContent(ItemJustify justify)
  Sets the CSS justify-content property for the container.
  • Parameter: justify (ItemJustify) – defines the horizontal alignment of the items.
  • Returns: The current OverflowSet instance to enable method chaining.

• Clear()
  Removes all child components from the OverflowSet.

• Replace(IComponent newComponent, IComponent oldComponent)
  Replaces an existing child component (oldComponent) with a new one (newComponent).
  • Parameters:
  – newComponent (IComponent): The component to add.
  – oldComponent (IComponent): The component to be replaced.

• Add(IComponent component)
  Appends a new child component to the OverflowSet. If there is already content, a separator element is automatically inserted before adding the new component.
  • Parameter: component (IComponent) – the component to add.

• Items(params IComponent[] children)
  Adds multiple components at once.
  • Parameter: children (IComponent[]) – an array of components to add.
  • Returns: The current OverflowSet instance.

• DisableSizeCache()
  Disables caching of component sizes. Useful if item sizes must be recalculated on each render.
  • Returns: The current OverflowSet instance.

• SetOverflowIndex(int i)
  Configures the index where items will start to collapse into the overflow menu.
  • Parameter: i (int) – the index indicating the start of overflow.
  • Returns: The current OverflowSet instance.

• Small()
  Switches the OverflowSet to a small variant by applying a smaller style to its children.
  • Returns: The current OverflowSet instance.

Properties

• MaximumItemsToDisplay (int)
  Gets or sets the maximum number of items to display before collapsing excess items into the overflow menu. Changing this value triggers a recalculation of the layout.

• OverflowIndex (int)
  Gets or sets the index threshold for when items are collapsed into the overflow menu. Adjusting this value customizes at which point the OverflowSet starts managing overflow behavior.

• IsSmall (bool)
  Gets or sets whether the OverflowSet is using the small styling variant. Setting this property adds or removes the "tss-small" class to adjust the appearance.

Samples

Basic OverflowSet Example

In this sample, an OverflowSet is created with multiple button items. When the display area is constrained, excess items will collapse into an overflow menu rendered as a chevron button.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var msg = TextBlock().Var(out var message);

            // Create an OverflowSet with several folder buttons.
            var overflowSet = OverflowSet()
                .PaddingTop(16.px())
                .PB(16)
                .Items(
                    Button("Folder 1").Link().OnClick((s, e) => message.Text("Folder 1")),
                    Button("Folder 2").Link().OnClick((s, e) => message.Text("Folder 2")).Disabled(),
                    Button("Folder 3").Link().OnClick((s, e) => message.Text("Folder 3")),
                    Button("Folder 4").Link().OnClick((s, e) => message.Text("Folder 4")),
                    Button("Folder 5").Link().OnClick((s, e) => message.Text("Folder 5")),
                    Button("Folder 6").Link().OnClick((s, e) => message.Text("Folder 6"))
                );

            // Optionally configure to display in a smaller style:
            overflowSet.Small();

            // Append OverflowSet to the document body.
            document.body.appendChild(overflowSet.Render());
            document.body.style.overflow = "hidden";
            MountCenteredToBody(overflowSet);
        }
    }

}

See Also

• Breadcrumb
• Stack
• Grid