Tesserae - Segmented Pivot

SegmentedPivot

Description

A segmented navigation pivot

A SegmentedPivot is a tabbed interface styled as a segmented control. It's best used for toggling between closely related views or filters where space is limited.

The active tab's content is wrapped the same way a Stack wraps its children, so sizing extensions such as .S(), .WS(), .HS(), and .Grow() applied to the component returned by a tab's content factory take effect on the wrapper and fill the available space — the same behavior as adding a component to a Stack.

Sample

segmented-pivot-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = SegmentedPivot()
                .SegmentedPivot("tab1", SegmentTitle("Overview"),  () => CenteredWithBackground(Message("Overview Content")))
                .SegmentedPivot("tab2", SegmentTitle("Logs"),      () => CenteredWithBackground(Message("Logs Content")))
                .SegmentedPivot("tab3", SegmentTitle("Analytics"), () => CenteredWithBackground(Message("Analytics Content")))
                .SegmentedPivot("tab4", SegmentTitle("Firewall"),  () => CenteredWithBackground(Message("Firewall Content")));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

API reference

class

SegmentedPivot

public sealed class SegmentedPivot : IComponent, ISpecialCaseStyling, IBindableComponent<string>

A pill-style pivot variant where the tabs share a connected segmented-control look.

Namespace: Tesserae
Implements: IComponent, ISpecialCaseStyling, IBindableComponent<string>

Constructors

Name	Description
SegmentedPivot	Initializes a new instance of this class.

Constructor

SegmentedPivot

public SegmentedPivot()

Initializes a new instance of this class.

Properties

Name	Description
SelectedTab	Gets or sets the selected tab.
StylingContainer	Gets the HTMLElement that should receive styling. Exposing the root as the styling container (via `ISpecialCaseStyling`) lets sizing helpers like .S() / .Grow() write directly onto the pivot instead of an extra wrapper when it is placed inside a Stack or Grid, matching Pivot.
PropagateToStackItemParent	Gets whether styling should propagate to the stack item parent.

Property

SegmentedPivot.SelectedTab

public string SelectedTab

Gets or sets the selected tab.

Property

SegmentedPivot.StylingContainer

public HTMLElement StylingContainer { get; }

Gets the HTMLElement that should receive styling. Exposing the root as the styling container (via ISpecialCaseStyling) lets sizing helpers like .S() / .Grow() write directly onto the pivot instead of an extra wrapper when it is placed inside a Stack or Grid, matching Pivot.

Property

SegmentedPivot.PropagateToStackItemParent

public bool PropagateToStackItemParent

Gets whether styling should propagate to the stack item parent.

Methods

Name	Description
OnBeforeNavigate	Registers a callback invoked when the before navigate event fires.
OnNavigate	Registers a callback invoked when the navigate event fires.
RefreshPivotSizes	Refreshes the pivot sizes, re-evaluating whether the scroll and overflow controls should be visible. Useful after the pivot's container changes size in a way a `ResizeObserver` can't observe.
Select	Configures the component to select.
AsObservable	Returns an observable that tracks the id of the currently-selected tab.
SetBoundValue	Programmatically selects a tab by id as part of a two-way binding.
Render	Renders the component's root HTML element.

Method

SegmentedPivot.OnBeforeNavigate

public SegmentedPivot OnBeforeNavigate(PivotEventHandler<PivotBeforeNavigateEvent> onBeforeNavigate)

Registers a callback invoked when the before navigate event fires.

Method

SegmentedPivot.OnNavigate

public SegmentedPivot OnNavigate(PivotEventHandler<PivotNavigateEvent> onNavigate)

Registers a callback invoked when the navigate event fires.

Method

SegmentedPivot.RefreshPivotSizes

public void RefreshPivotSizes()

Refreshes the pivot sizes, re-evaluating whether the scroll and overflow controls should be visible. Useful after the pivot's container changes size in a way a ResizeObserver can't observe.

Method

SegmentedPivot.Select

public SegmentedPivot Select(string id, bool refresh = false)

Configures the component to select.

Method

SegmentedPivot.AsObservable

public IObservable<string> AsObservable()

Returns an observable that tracks the id of the currently-selected tab.

Method

SegmentedPivot.SetBoundValue

public void SetBoundValue(string value)

Programmatically selects a tab by id as part of a two-way binding.

Method

SegmentedPivot.Render

public HTMLElement Render()

Renders the component's root HTML element.

SegmentedPivot

Description

Sample

API reference

Constructors

SegmentedPivot

Properties

SegmentedPivot.SelectedTab

SegmentedPivot.StylingContainer

SegmentedPivot.PropagateToStackItemParent

Methods

SegmentedPivot.OnBeforeNavigate

SegmentedPivot.OnNavigate

SegmentedPivot.RefreshPivotSizes

SegmentedPivot.Select

SegmentedPivot.AsObservable

SegmentedPivot.SetBoundValue

SegmentedPivot.Render

See also