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

Namespace: Tesserae
Inheritance: ComponentBase<Expander, HTMLElement> → Expander

Constructors

Name	Description
Expander	Initializes a new instance of this class.

Constructor

Expander

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

Initializes a new instance of this class.

Properties

Name	Description
IsExpanded	Gets or sets whether the expander is expanded.
Title	Gets or sets the title text when no custom header is provided.

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

Name	Description
SetTitle	Sets the title of the component.
SetHeader	Sets the header of the component.
SetContent	Sets the content of the component.
OptionIcon	Configures the option icon on the component.
ChevronRight	Configures the chevron right on the component.
Expanded	Expands the component.
Collapse	Collapses the component.
Expand	Expands the component.
Toggle	Toggles the component's state.
OnToggle	Registers a callback invoked when the toggle event fires.
OnExpand	Registers a callback invoked when the expand event fires.
OnCollapse	Registers a callback invoked when the collapse event fires.
Render	Renders the component's root HTML element.

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.

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