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 Pivot, used when the strip needs to be positioned independently of its panels.

Namespace: Tesserae
Implements: IComponent

Constructors

Name	Description
PivotSelector	Initializes a new instance of this class.

Constructor

PivotSelector

public PivotSelector()

Initializes a new instance of this class.

Methods

Name	Description
OnBeforeNavigate	Registers a callback invoked when the before navigate event fires.
OnNavigate	Registers a callback invoked when the navigate event fires.
SetCommands	Sets the commands of the component.
Select	Configures the component to select.
Render	Renders the component's root HTML element.

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

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

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

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