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.

API reference

class

SegmentedPivot

public sealed class SegmentedPivot : IComponent

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

Namespace: Tesserae
Implements: IComponent

Constructors

Name	Description
SegmentedPivot	Initializes a new instance of this class.

Constructor

SegmentedPivot

public SegmentedPivot()

Initializes a new instance of this class.

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.
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.Render

public HTMLElement Render()

Renders the component's root HTML element.

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

SegmentedPivot

Description

API reference

Constructors

SegmentedPivot

Methods

SegmentedPivot.OnBeforeNavigate

SegmentedPivot.OnNavigate

SegmentedPivot.Select

SegmentedPivot.Render

Sample

See also