# Pivot

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.

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:

using System;
using static H5.Core.dom;
using Tesserae;
using static Tesserae.UI;

public class PivotExample
{
    public static void Main()
    {
        // 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
        document.body.appendChild(pivot.Render());
    }
}

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

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

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.

using System;
using static H5.Core.dom;
using Tesserae;
using static Tesserae.UI;

public class PivotBasicSample
{
    public static void Main()
    {
        // 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
        document.body.appendChild(pivot.Render());
    }
}

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.

using System;
using static H5.Core.dom;
using Tesserae;
using static Tesserae.UI;

public class PivotCachedSample
{
    public static void Main()
    {
        // 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
        document.body.appendChild(pivot.Render());
    }
}

• Dialog
• Modal
• Panel