Tesserae - Overflow Set

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:

overflow-set-sample.js

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);
        }
    }

}

API reference

class

OverflowSet

public class OverflowSet : IComponent, IContainer<Breadcrumb, IComponent>

A horizontal set of items where any items that do not fit are automatically collapsed into an overflow menu.

Constructors

Constructor

OverflowSet

public OverflowSet()

Initializes a new instance of this class.

Properties

Property

OverflowSet.MaximumItemsToDisplay

public int MaximumItemsToDisplay { get ; set ; }

Gets or sets the maximum items to display.

Property

OverflowSet.OverflowIndex

public int OverflowIndex { get ; set ; }

Gets or sets the overflow index.

Property

OverflowSet.IsSmall

public bool IsSmall { get ; set ; }

Returns a value indicating whether the component is small.

Methods

Method

OverflowSet.JustifyContent

public OverflowSet JustifyContent(ItemJustify justify)

Sets the justify-content css property for this set

Parameters

justify

Method

OverflowSet.Clear

public void Clear()

Clears the component's current state.

Method

OverflowSet.Replace

public void Replace(IComponent newComponent, IComponent oldComponent)

Replaces an existing item with a new one.

Method

OverflowSet.Add

public void Add(IComponent component)

Adds the given item to the component.

Method

OverflowSet.Items

public OverflowSet Items(params IComponent[] children)

Adds the given items to the component.

Method

OverflowSet.DisableSizeCache

public OverflowSet DisableSizeCache()

Disables the size cache on the component.

Method

OverflowSet.SetOverflowIndex

public OverflowSet SetOverflowIndex(int i)

Sets the overflow index of the component.

Method

OverflowSet.Small

public OverflowSet Small()

Renders the component at small size.

Method

OverflowSet.Render

public HTMLElement Render()

Renders the component's root HTML element.

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.

overflow-set-2-sample.js

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);
        }
    }

}

OverflowSet

Description

Usage

API reference

Constructors

OverflowSet

Properties

OverflowSet.MaximumItemsToDisplay

OverflowSet.OverflowIndex

OverflowSet.IsSmall

Methods

OverflowSet.JustifyContent

Parameters

OverflowSet.Clear

OverflowSet.Replace

OverflowSet.Add

OverflowSet.Items

OverflowSet.DisableSizeCache

OverflowSet.SetOverflowIndex

OverflowSet.Small

OverflowSet.Render

Samples

Basic OverflowSet Example

See Also