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 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 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, IBindableComponent<string>

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

Namespace: Tesserae
Implements: IComponent, 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.

Property

SegmentedPivot.SelectedTab

public string SelectedTab

Gets or sets the selected tab.

Methods

Name	Description
OnBeforeNavigate	Registers a callback invoked when the before navigate event fires.
OnNavigate	Registers a callback invoked when the navigate event fires.
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.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

Methods

SegmentedPivot.OnBeforeNavigate

SegmentedPivot.OnNavigate

SegmentedPivot.Select

SegmentedPivot.AsObservable

SegmentedPivot.SetBoundValue

SegmentedPivot.Render

See also