Tesserae - Card Pivot

CardPivot

Description

A pivot using cards

A CardPivot is a tabbed interface where the tabs are presented as connected cards with a shared border. It is useful for displaying selectable metrics that control the view below them.

API reference

class

CardPivot

public sealed class CardPivot : IComponent

A pivot variant that styles each tab as a card, used for dashboard-style switching between rich panels.

Constructors

Constructor

CardPivot

public CardPivot()

Initializes a new instance of this class.

Methods

Method

CardPivot.OnBeforeNavigate

public CardPivot OnBeforeNavigate(PivotEventHandler<PivotBeforeNavigateEvent> onBeforeNavigate)

Registers a callback invoked when the before navigate event fires.

Method

CardPivot.OnNavigate

public CardPivot OnNavigate(PivotEventHandler<PivotNavigateEvent> onNavigate)

Registers a callback invoked when the navigate event fires.

Method

CardPivot.Select

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

Configures the component to select.

Method

CardPivot.Render

public HTMLElement Render()

Renders the component's root HTML element.

Sample

card-pivot-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 = CardPivot()
                .CardPivot("tab1", () => Metric("Requests", "1.1k").Change(TextBlock("").SmallPlus().Foreground(Theme.Colors.Neutral600)), () => Card(TextBlock("Content for Requests").P(32)))
                .CardPivot("tab2", () => Metric("Tokens", "196.97k"), () => Card(TextBlock("Content for Tokens").P(32)))
                .CardPivot("tab3", () => Metric("Cost", "$0.09"), () => Card(TextBlock("Content for Cost").P(32)))
                .CardPivot("tab4", () => Metric("Errors", "194"), () => Card(TextBlock("Content for Errors").P(32)))
                .CardPivot("tab5", () => Metric("Cached", "408"), () => Card(TextBlock("Content for Cached").P(32)));

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

CardPivot

Description

API reference

Constructors

CardPivot

Methods

CardPivot.OnBeforeNavigate

CardPivot.OnNavigate

CardPivot.Select

CardPivot.Render

Sample

See also