Tesserae

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

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

Methods

Justified()
Returns: Pivot
Description: Adjusts the tab title bar's layout so that the tabs are evenly distributed across the available width.
Centered()
Returns: Pivot
Description: Centers the tab titles within the tab title bar.
HideIfSingle()
Returns: Pivot
Description: Hides the tab header if there is only one tab, reducing visual clutter.
RefreshPivotSizes()
Returns: void
Description: Recalculates the layout and sizing of tabs, including handling overflow of tab titles.
OnBeforeNavigate(PivotEventHandler onBeforeNavigate)
Returns: Pivot
Parameter: onBeforeNavigate – A delegate that handles the event before a tab navigation occurs. You can cancel the navigation by invoking Cancel() on the event argument.
OnNavigate(PivotEventHandler onNavigate)
Returns: Pivot
Parameter: onNavigate – A delegate that is invoked after a tab has been navigated to.
Select(string id, bool refresh = false)
Returns: Pivot
Parameters:
• id – The unique identifier of the tab to select.
• refresh (optional) – If true, forces a refresh even if the tab is currently selected. Description: Programmatically selects a tab by its identifier.
Render()
Returns: HTMLElement
Description: Renders the Pivot component including the title bar, the animated line indicator, and the currently selected tab content. This is the entry point for integrating the component into the document.

Properties

SelectedTab (string)
Description: Gets the unique identifier of the currently selected tab.
StylingContainer (HTMLElement)
Description: The primary container element that holds all parts of the Pivot component (tabs, line indicator, and content area).
PropagateToStackItemParent (bool)
Description: Indicates whether the styling should propagate to the parent container when the Pivot is nested inside a stack.

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

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

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