Tesserae - Accordion

Accordion

Description

A collapsible content component

An accordion contains a list of expanders that can be toggled to reveal more information. They are useful for organizing content into manageable chunks and reducing vertical space usage when not all information needs to be visible at once.

Tesserae's Accordion component manages multiple Expanders, allowing you to control whether one or multiple sections can be open at the same time.

API reference

class

Accordion

public sealed class Accordion : ComponentBase<Accordion, HTMLElement>

A vertically-stacked list of expandable sections, of which one or more may be open at a time.

Constructors

Constructor

Accordion

public Accordion(params Expander[] items)

Initializes a new instance of this class.

Properties

Property

Accordion.AllowMultiple

public bool AllowMultiple { get ; set ; }

Gets or sets whether multiple sections can be expanded at once.

Methods

Method

Accordion.AddItem

public Accordion AddItem(Expander item)

Adds the given item to the component.

Method

Accordion.AddItems

public Accordion AddItems(params Expander[] items)

Adds the given items to the component.

Method

Accordion.Items

public Accordion Items(params Expander[] items)

Adds the given items to the component.

Method

Accordion.AllowMultipleOpen

public Accordion AllowMultipleOpen(bool value = true)

Allows the multiple open.

Method

Accordion.Render

public override HTMLElement Render()

Renders the component's root HTML element.

class

Expander

public sealed class Expander : ComponentBase<Expander, HTMLElement>

A single expand / collapse section, with a clickable header that reveals its body content.

Constructors

Constructor

Expander

public Expander(string title = null, IComponent content = null)

Initializes a new instance of this class.

Properties

Property

Expander.IsExpanded

public bool IsExpanded { get ; set ; }

Gets or sets whether the expander is expanded.

Property

Expander.Title

public string Title { get ; set ; }

Gets or sets the title text when no custom header is provided.

Methods

Method

Expander.SetTitle

public Expander SetTitle(string title)

Sets the title of the component.

Method

Expander.SetHeader

public Expander SetHeader(IComponent header)

Sets the header of the component.

Method

Expander.SetContent

public Expander SetContent(IComponent content)

Sets the content of the component.

Method

Expander.OptionIcon

public Expander OptionIcon(UIcons icon, string color = "", string background = "")

Configures the option icon on the component.

Method

Expander.ChevronRight

public Expander ChevronRight()

Configures the chevron right on the component.

Method

Expander.Expanded

public Expander Expanded(bool value = true)

Expands the component.

Method

Expander.Collapse

public Expander Collapse()

Collapses the component.

Method

Expander.Expand

public Expander Expand()

Expands the component.

Method

Expander.Toggle

public Expander Toggle()

Toggles the component's state.

Method

Expander.OnToggle

public Expander OnToggle(Action<Expander> onToggle)

Registers a callback invoked when the toggle event fires.

Method

Expander.OnExpand

public Expander OnExpand(Action<Expander> onExpand)

Registers a callback invoked when the expand event fires.

Method

Expander.OnCollapse

public Expander OnCollapse(Action<Expander> onCollapse)

Registers a callback invoked when the collapse event fires.

Method

Expander.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Samples

Basic Accordion

accordion-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 accordion = Accordion(
                Expander("Getting started", TextBlock("Use expanders to reveal details in place without navigating away.")).Expanded(),
                Expander("Configuration", Stack().Children(
                    TextBlock("You can nest any component inside an expander."),
                    Button("Primary action").Primary())),
                Expander("Advanced", TextBlock("Combine with Card for complex layouts."))
            ).AllowMultipleOpen(false);

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

Accordion with Multiple Open Allowed

accordion-multiple-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 accordion = Accordion(
                Expander("Section 1", TextBlock("Multiple sections can be open simultaneously here.")),
                Expander("Section 2", TextBlock("This is useful for comparing information between sections.")),
                Expander("Section 3", TextBlock("Just set .AllowMultipleOpen(true) on the accordion."))
            ).AllowMultipleOpen(true);

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

Standalone Expander

accordion-expander-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 expander = Expander("What is Tesserae?", TextBlock("Tesserae provides a fluent API for building UI components.")).Expanded();

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

Expander with OptionIcon and ChevronRight

accordion-icons-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 accordion = Accordion(
                Expander("What does indexing do?", TextBlock("Indexing reads each document, extracts structured text, and stores it in a vector + keyword index so queries match in milliseconds.")).OptionIcon(UIcons.Info, Theme.Colors.Blue600, Theme.Colors.Blue100).ChevronRight().Expanded(),
                Expander("Where are my files stored?", TextBlock("")).OptionIcon(UIcons.Check, Theme.Colors.Green600, Theme.Colors.Green100).ChevronRight(),
                Expander("Why did my last build fail?", TextBlock("")).OptionIcon(UIcons.Exclamation, Theme.Colors.Orange600, Theme.Colors.Orange100).ChevronRight(),
                Expander("How do I rotate the IMAP token?", TextBlock("")).OptionIcon(UIcons.TriangleWarning, Theme.Colors.Red600, Theme.Colors.Red100).ChevronRight(),
                Expander("Can I use a custom embedding model?", TextBlock("")).OptionIcon(UIcons.Settings, Theme.Colors.Blue600, Theme.Colors.Blue100).ChevronRight()
            ).AllowMultipleOpen(false);

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

Referenced by

Expander

Accordion

Description

API reference

Constructors

Accordion

Properties

Accordion.AllowMultiple

Methods

Accordion.AddItem

Accordion.AddItems

Accordion.Items

Accordion.AllowMultipleOpen

Accordion.Render

Constructors

Expander

Properties

Expander.IsExpanded

Expander.Title

Methods

Expander.SetTitle

Expander.SetHeader

Expander.SetContent

Expander.OptionIcon

Expander.ChevronRight

Expander.Expanded

Expander.Collapse

Expander.Expand

Expander.Toggle

Expander.OnToggle

Expander.OnExpand

Expander.OnCollapse

Expander.Render

Samples

Basic Accordion

Accordion with Multiple Open Allowed

Standalone Expander

Expander with OptionIcon and ChevronRight

See also

Referenced by