Tesserae - Panel

Panel

Description

The Panel component creates a modal or non-modal overlay that presents contextual content, such as forms or informational messages. It is part of the Surfaces group and is typically used to display self-contained experiences without leaving the current app view. Panels support header titles, footers, content areas, and configurable behaviors like light dismiss, dark overlay, and blocking or non-blocking interactions.

Usage

Panels are instantiated using the static helper method from Tesserae.UI. They allow customization of size, panel side (near or far), and additional behaviors. Below is a minimal example of creating a panel with light dismiss capability and custom footer:

panel-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
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 btn = Button("Show").OnClick((s, e) => new PanelExample().ShowPanel());
            document.body.style.overflow = "hidden";
            MountCenteredToBody(btn);
        }
    }

    public class PanelExample
    {
                public void ShowPanel()
                {
                    // Instantiate a panel with a light dismiss feature
                    Panel panel = null;
                    panel = Panel("Panel Title").LightDismiss();

                    // Set content for the panel
                    panel.Content(
                        Stack().Children(
                            TextBlock("This is the panel content.")
                        )
                    );

                    // Set a custom footer for the panel
                    panel.SetFooter(
                        HStack().Children(
                            Button("Cancel"),
                            Button("Ok").Primary()
                        )
                    );

                    // Display the panel
                    panel.Show();
                }
            }
}

API reference

class

Panel

public sealed class Panel : Layer<Panel>, IHasBackgroundColor

A side-anchored slide-in panel (drawer) typically used for property inspectors and detail views.

Constructors

Constructor

Panel

public Panel(string title = null) : this(TextBlock(title).SemiBold())

Initializes a new instance of this class.

Constructor

Panel

public Panel(IComponent title)

Initializes a new instance of this class.

Properties

Property

Panel.Content

public override IComponent Content { get ; set ; }

Sets the content rendered inside the surface.

Property

Panel.Size

public PanelSize Size { get ; set ; }

Gets or sets the size of the component.

Property

Panel.Side

public PanelSide Side { get ; set ; }

Gets or sets which side of the parent the component is anchored to.

Property

Panel.CanLightDismiss

public bool CanLightDismiss { get ; set ; }

Gets or sets a value indicating whether the surface can be dismissed by clicking outside it (light dismiss).

Property

Panel.IsDark

public bool IsDark { get ; set ; }

Gets or sets a value indicating whether the component uses the dark colour theme.

Property

Panel.IsNonBlocking

public bool IsNonBlocking { get ; set ; }

Gets or sets a value indicating whether the surface is non-blocking (allows interaction with the page beneath it).

Property

Panel.ShowCloseButton

public bool ShowCloseButton { get ; set ; }

Gets or sets a value indicating whether the close button is shown.

Property

Panel.Background

public string Background { get ; set ; }

Gets or sets the CSS background of the component.

Methods

Method

Panel.Show

public override Panel Show()

Shows the component.

Method

Panel.OnHide

public Panel OnHide(OnHideHandler onHide)

Registers a callback invoked when the hide event fires.

Method

Panel.Hide

public override void Hide(Action onHidden = null)

Hides the component.

Method

Panel.HideCloseButton

public Panel HideCloseButton()

Hides the close button.

Method

Panel.SetFooter

public Panel SetFooter(IComponent footer)

Sets the footer of the component.

Method

Panel.Small

public Panel Small()

Renders the component at small size.

Method

Panel.Medium

public Panel Medium()

Renders the component at medium size.

Method

Panel.Large

public Panel Large()

Renders the component at large size.

Method

Panel.LargeFixed

public Panel LargeFixed()

Renders the component at large size with a fixed width.

Method

Panel.ExtraLarge

public Panel ExtraLarge()

Renders the component at extra-large size.

Method

Panel.FullWidth

public Panel FullWidth()

Stretches the component to the full width of its parent.

Method

Panel.Far

public Panel Far()

Anchors the component to the far side of its parent.

Method

Panel.Near

public Panel Near()

Anchors the component to the near side of its parent.

Method

Panel.LightDismiss

public Panel LightDismiss()

Enables light-dismiss behaviour (clicking outside the surface closes it).

Method

Panel.NoLightDismiss

public Panel NoLightDismiss()

Removes / disables the light dismiss on the component.

Method

Panel.Dark

public Panel Dark()

Applies the dark colour scheme to the component.

Method

Panel.NonBlocking

public Panel NonBlocking()

Makes the surface non-blocking, allowing interaction with the page beneath it.

Method

Panel.Blocking

public Panel Blocking()

Makes the surface blocking (the default — interaction with the page beneath is prevented).

Samples

This example demonstrates how to create a panel with custom content and footer, enable light dismiss, and display the panel.

panel-2-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
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 sampleComponent = new PanelSampleUsage();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class PanelSampleUsage : IComponent
    {
        public HTMLElement Render()
        {
            return Button("Open panel").Primary().OnClick((sender, evt) => OpenPanel()).Render();
        }

        private void OpenPanel()
        {
            // Create a panel with a title and enable light dismiss
            Panel panel = null;
            panel = Panel("Demo Panel").LightDismiss()
                .Content(
                    Stack().Children(
                        TextBlock("This panel can be closed by clicking outside or on the close button."),
                        TextBlock("Configure the panel size and side as needed.")
                    )
                )
                .SetFooter(
                    HStack().Children(
                        Button("Cancel").OnClick((s, e) => panel.Hide()),
                        Button("Confirm").Primary().OnClick((s, e) =>
                        {
                            // Perform confirm action then hide the panel
                            panel.Hide();
                        })
                    )
                );

            // Optionally change the size and panel side
            panel.Medium();
            panel.Far();

            // Show the panel
            panel.Show();
        }
    }
}

Panel

Description

Usage

API reference

Constructors

Panel

Panel

Properties

Panel.Content

Panel.Footer

Panel.Size

Panel.Side

Panel.CanLightDismiss

Panel.IsDark

Panel.IsNonBlocking

Panel.ShowCloseButton

Panel.Background

Methods

Panel.Show

Panel.OnHide

Panel.Hide

Panel.HideCloseButton

Panel.SetFooter

Panel.Small

Panel.Medium

Panel.Large

Panel.LargeFixed

Panel.ExtraLarge

Panel.FullWidth

Panel.Far

Panel.Near

Panel.LightDismiss

Panel.NoLightDismiss

Panel.Dark

Panel.NonBlocking

Panel.Blocking

Samples

Basic Panel with Footer and Light Dismiss

See Also

Referenced by