Curiosity - SegmentedPivot

SegmentedPivot recipe

Source: 04_SegmentedPivot/ · Pivot's compact cousin, styled as a segmented control.

It has the same API as Pivot, but reads as "pick exactly one" — so reach for it when the choices are mutually-exclusive filters or short toggles.

How it looks

A connected segmented control that filters the same list. The preview is a runnable Tesserae approximation of the recipe's SegmentedPivot().

segmented-pivot-preview.cs

using System;
using System.Linq;
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()
        {
            IComponent List(params string[] rows) =>
                VStack().P(16).Children(rows.Select(r => (IComponent)Card(TextBlock(r)).WS().MB(8)).ToArray());

            var pivot = SegmentedPivot()
                .SegmentedPivot("all",    SegmentTitle("All"),    () => List("Ticket #1 — Open", "Ticket #2 — Closed", "Ticket #3 — Open"))
                .SegmentedPivot("open",   SegmentTitle("Open"),   () => List("Ticket #1 — Open", "Ticket #3 — Open"))
                .SegmentedPivot("closed", SegmentTitle("Closed"), () => List("Ticket #2 — Closed"));

            var page = VStack().WS().Children(
                SectionTitle(UIcons.MenuDots, "SegmentedPivot", "Compact toggles for mutually-exclusive filters"),
                pivot.PT(12)
            ).P(16);

            document.body.style.overflow = "hidden";
            MountToBody(page);
        }
    }
}

When to use which

Use `Pivot` when…	Use `SegmentedPivot` when…
Tabs are page sections (Overview / Settings).	Tabs are filters or toggles (All / Open / Closed).
Labels are long or vary in length.	Labels are short and roughly the same length.
You may have many tabs (overflow matters).	You have 2–5 tightly related options.
Tabs each render a substantial view.	Tabs render the same kind of thing, filtered.

Code sketch

SegmentedPivot()
    .Item("All",     () => BuildList(filter: null))
    .Item("Open",    () => BuildList(filter: Status.Open))
    .Item("Closed",  () => BuildList(filter: Status.Closed))

SegmentedPivot recipe

How it looks

When to use which

Code sketch

See also