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.

Samples

Basic PivotSelector

pivot-selector-basic-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.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 Transpose.Core;
using Tesserae;
using static Transpose.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 Transpose.Core;
using Tesserae;
using static Transpose.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);
        }
    }
}

API reference

class

PivotSelector

public class PivotSelector : IComponent, ISpecialCaseStyling, IBindableComponent<string>

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, ISpecialCaseStyling, IBindableComponent<string>

Constructors

Name	Description
PivotSelector	Initializes a new instance of this class.

Constructor

PivotSelector

public PivotSelector()

Initializes a new instance of this class.

Properties

Name	Description
StylingContainer	Gets the HTMLElement that should receive styling. Exposing the root as the styling container (via `ISpecialCaseStyling`) lets sizing helpers like .S() / .Grow() write directly onto the selector instead of an extra wrapper when it is placed inside a Stack or Grid, matching the pivot family.
PropagateToStackItemParent	Gets whether styling should propagate to the stack item parent.

Property

PivotSelector.StylingContainer

public HTMLElement StylingContainer { get; }

Gets the HTMLElement that should receive styling. Exposing the root as the styling container (via ISpecialCaseStyling) lets sizing helpers like .S() / .Grow() write directly onto the selector instead of an extra wrapper when it is placed inside a Stack or Grid, matching the pivot family.

Property

PivotSelector.PropagateToStackItemParent

public bool PropagateToStackItemParent

Gets whether styling should propagate to the stack item parent.

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.
AsObservable	Returns an observable that tracks the id of the currently-selected tab.
SetBoundValue	Programmatically selects a tab by id as part of a two-way binding.
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.AsObservable

public IObservable<string> AsObservable()

Returns an observable that tracks the id of the currently-selected tab.

Method

PivotSelector.SetBoundValue

public void SetBoundValue(string value)

Programmatically selects a tab by id as part of a two-way binding.

Method

PivotSelector.Render

public HTMLElement Render()

Renders the component's root HTML element.

PivotSelector

Description

Samples

Basic PivotSelector

PivotSelector with custom buttons

PivotSelector with large number of tabs

API reference

Constructors

PivotSelector

Properties

PivotSelector.StylingContainer

PivotSelector.PropagateToStackItemParent

Methods

PivotSelector.OnBeforeNavigate

PivotSelector.OnNavigate

PivotSelector.SetCommands

PivotSelector.Select

PivotSelector.AsObservable

PivotSelector.SetBoundValue

PivotSelector.Render

See also