Tesserae

PivotSelector

Description

A control to select a pivot

PivotSelector is a variation of the Pivot component that uses a Dropdown for navigation. It is particularly effective for mobile-first designs or interfaces with a large number of tabs that would otherwise require excessive horizontal scrolling.

Samples

Basic PivotSelector

pivot-selector-basic-sample.js

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 = PivotSelector()
                .Pivot("tab1", "Tab 1", () => Card(TextBlock("Content for Tab 1").P(32)))
                .Pivot("tab2", "Tab 2", () => Card(TextBlock("Content for Tab 2").P(32)))
                .Pivot("tab3", "Tab 3", () => Card(TextBlock("Content for Tab 3").P(32)));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

PivotSelector with custom buttons

pivot-selector-custom-buttons-sample.js

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 = PivotSelector()
                .SetCommands(
                    Button().SetIcon(UIcons.Add).NoBorder().NoBackground().OnClick(() => alert("Add clicked")),
                    Button().SetIcon(UIcons.Settings).NoBorder().NoBackground().OnClick(() => alert("Settings clicked"))
                )
                .Pivot("tab1", () => Button("Tab 1").NoBackground().NoBorder().SetIcon(UIcons.Rocket), () => Card(TextBlock("Content for Tab 1").P(32)))
                .Pivot("tab2", () => Button("Tab 2").NoBackground().NoBorder().SetIcon(UIcons.Car),    () => Card(TextBlock("Content for Tab 2").P(32)));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

PivotSelector with large number of tabs

pivot-selector-many-tabs-sample.js

using System;
using System.Linq;
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 = PivotSelector()
                .Pivot(Enumerable.Range(1, 20).Select(i => ($"tab{i}", $"Tab {i}", (Func<IComponent>)(() => Card(TextBlock($"Content for Tab {i}").P(32))))).ToArray());

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}