Tesserae - Pivot Selector

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.

API reference

class

PivotSelector

public class PivotSelector : IComponent

A standalone tab-selector strip that drives an external , used when the strip needs to be positioned independently of its panels.

Constructors

Constructor

PivotSelector

public PivotSelector()

Initializes a new instance of this class.

Methods

Method

PivotSelector.OnBeforeNavigate

public PivotSelector OnBeforeNavigate(PivotEventHandler<PivotBeforeNavigateEvent> onBeforeNavigate)

Registers a callback invoked when the before navigate event fires.

Method

PivotSelector.OnNavigate

public PivotSelector OnNavigate(PivotEventHandler<PivotNavigateEvent> onNavigate)

Registers a callback invoked when the navigate event fires.

Method

PivotSelector.SetCommands

public PivotSelector SetCommands(params IComponent[] commands)

Sets the commands of the component.

Method

PivotSelector.Select

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

Configures the component to select.

Method

PivotSelector.Render

public HTMLElement Render()

Renders the component's root HTML element.

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

PivotSelector

Description

API reference

Constructors

PivotSelector

Methods

PivotSelector.OnBeforeNavigate

PivotSelector.OnNavigate

PivotSelector.SetCommands

PivotSelector.Select

PivotSelector.Render

Samples

Basic PivotSelector

PivotSelector with custom buttons

PivotSelector with large number of tabs

See also