Tesserae - Expander

Expander

Description

A single expand / collapse section, with a clickable header that reveals its body content. Used standalone for "show more" affordances, or grouped inside an Accordion.

Usage

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(
                "Advanced settings",
                Stack().Children(
                    TextBlock("Hidden until expanded."),
                    CheckBox("Enable telemetry")
                ).Padding(8.px())
            );
            document.body.style.overflow = "hidden";
            MountCenteredToBody(expander);
        }
    }
}

API reference

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.

Referenced by

ToolCall

Expander

Description

Usage

API reference

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

See also

Referenced by