Tesserae - Pivot

Pivot

Description

The Pivot component is a tab-based container used to organize and display content panels within a user interface. It allows users to switch between different views or sections by clicking on tab titles, with options to customize tab alignment (normal, justified, or centered) and to control caching of tab content. Use it when you need to present segmented information in a compact, navigable format.

Usage

Instantiate the Pivot component using the static helper method from the Tesserae.UI static class. Add tabs by chaining the .Pivot() method with a unique tab identifier, a title generated with PivotTitle(), and a function that returns the tab content. The Pivot component is designed to be highly configurable with additional style methods for layout management.

Below is a simple usage example:

pivot-sample.cs

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()
        {
            new PivotExample().Run();
        }
    }

    public class PivotExample
    {
        public void Run()
        {
            // Create a Pivot with three tabs
            var pivot = Pivot()
                .Pivot("first-tab", PivotTitle("First Tab"), () => TextBlock("Content for First Tab"))
                .Pivot("second-tab", PivotTitle("Second Tab"), () => TextBlock("Content for Second Tab"))
                .Pivot("third-tab", PivotTitle("Third Tab"), () => TextBlock("Content for Third Tab"));

            // Optionally customize the pivot style: centered alignment
            pivot.Centered();

            // Render and attach the Pivot component to the DOM
            var sampleComponent = pivot;
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }
}

API reference

class

Pivot

public sealed class Pivot : IComponent, ISpecialCaseStyling

A horizontal tabbed surface with one tab visible at a time.

Namespace: Tesserae
Implements: IComponent, ISpecialCaseStyling

Constructors

Name	Description
Pivot	Initializes a new instance of this class.

Constructor

Pivot

public Pivot()

Initializes a new instance of this class.

Properties

Name	Description
SelectedTab	Gets or sets the selected tab.
StylingContainer	Gets or sets the styling container.
PropagateToStackItemParent	Gets or sets the propagate to stack item parent.

Property

Pivot.SelectedTab

public string SelectedTab

Gets or sets the selected tab.

Property

Pivot.StylingContainer

public HTMLElement StylingContainer { get; }

Gets or sets the styling container.

Property

Pivot.PropagateToStackItemParent

public bool PropagateToStackItemParent

Gets or sets the propagate to stack item parent.

Methods

Name	Description
Justified	Configures the component to justified.
Centered	Configures the component to centered.
HideIfSingle	Hides the if single.
EnableCtrlTabSwitching	Enables Ctrl+Alt+Right / Ctrl+Alt+Left to cycle through tabs in order while the pivot is mounted and focus is inside its container (or no element is focused). Safe to call multiple times — the handler is only registered once.
RefreshPivotSizes	Refreshes the pivot sizes.
RemoveTab	Removes the given tab from the component.
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

Pivot.Justified

public Pivot Justified()

Configures the component to justified.

Method

Pivot.Centered

public Pivot Centered()

Configures the component to centered.

Method

Pivot.HideIfSingle

public Pivot HideIfSingle()

Hides the if single.

Method

Pivot.EnableCtrlTabSwitching

public Pivot EnableCtrlTabSwitching()

Enables Ctrl+Alt+Right / Ctrl+Alt+Left to cycle through tabs in order while the pivot is mounted and focus is inside its container (or no element is focused). Safe to call multiple times — the handler is only registered once.

Method

Pivot.RefreshPivotSizes

public void RefreshPivotSizes()

Refreshes the pivot sizes.

Method

Pivot.RemoveTab

public void RemoveTab(string id)

Removes the given tab from the component.

Method

Pivot.OnBeforeNavigate

public Pivot OnBeforeNavigate(PivotEventHandler<PivotBeforeNavigateEvent> onBeforeNavigate)

Registers a callback invoked when the before navigate event fires.

Method

Pivot.OnNavigate

public Pivot OnNavigate(PivotEventHandler<PivotNavigateEvent> onNavigate)

Registers a callback invoked when the navigate event fires.

Method

Pivot.Select

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

Configures the component to select.

Method

Pivot.Render

public HTMLElement Render()

Renders the component's root HTML element.

Samples

Basic Pivot Usage Sample

This sample demonstrates creating a basic Pivot with three tabs. It sets up the Pivot, adds tabs with simple text content, applies centered tab alignment, and renders the component to the document body.

pivot-2-sample.cs

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()
        {
            new PivotBasicSample().Run();
        }
    }

    public class PivotBasicSample
    {
        public void Run()
        {
            // Create and configure the Pivot component with three tabs
            var pivot = Pivot()
                .Pivot("tab1", PivotTitle("Tab 1"), () => TextBlock("This is the content of Tab 1"))
                .Pivot("tab2", PivotTitle("Tab 2"), () => TextBlock("This is the content of Tab 2"))
                .Pivot("tab3", PivotTitle("Tab 3"), () => TextBlock("This is the content of Tab 3"))
                .Centered(); // Center the tab titles

            // Append the rendered pivot to the document body
            var sampleComponent = pivot;
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }
}

Advanced Usage: Cached vs. Not Cached Tabs

This sample shows how to configure tabs with caching options. Cached tabs store their content after the initial render to improve performance, while non-cached tabs re-render their content every time they are selected.

pivot-3-sample.cs

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()
        {
            new PivotCachedSample().Run();
        }
    }

    public class PivotCachedSample
    {
        public void Run()
        {
            // Create a Pivot with two tabs, one cached and one non-cached.
            var pivot = Pivot()
                .Pivot("cached-tab", PivotTitle("Cached Tab"),
                       () => TextBlock(DateTimeOffset.UtcNow.ToString()).Regular(), cached: true)
                .Pivot("non-cached-tab", PivotTitle("Non Cached Tab"),
                       () => TextBlock(DateTimeOffset.UtcNow.ToString()).Regular(), cached: false);

            // Append the rendered pivot to the document body
            var sampleComponent = pivot;
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }
}

Pivot

Description

Usage

API reference

Constructors

Pivot

Properties

Pivot.SelectedTab

Pivot.StylingContainer

Pivot.PropagateToStackItemParent

Methods

Pivot.Justified

Pivot.Centered

Pivot.HideIfSingle

Pivot.EnableCtrlTabSwitching

Pivot.RefreshPivotSizes

Pivot.RemoveTab

Pivot.OnBeforeNavigate

Pivot.OnNavigate

Pivot.Select

Pivot.Render

Samples

Basic Pivot Usage Sample

Advanced Usage: Cached vs. Not Cached Tabs

See also