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);
}
}
}
API reference
class
Pivot
public sealed class Pivot : IComponent, ISpecialCaseStyling
A horizontal tabbed surface with one tab visible at a time.
Constructors
Constructor
Pivot
public Pivot()
Initializes a new instance of this class.
Properties
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
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.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);
}
}
}
