# Panel

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.

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:

using System;
using H5;
using Tesserae;
using static Tesserae.UI;

public class PanelExample
{
    public void ShowPanel()
    {
        // Instantiate a panel with a light dismiss feature
        var 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();
    }
}

• Show()
  • Overrides the base Show method. Shows the panel on the UI and applies side-specific animation.
  • Parameters: None.

• Hide(Action onHidden = null)
  • Overrides the base Hide method. Hides the panel and optionally executes a callback after hidden.
  • Parameters: onHidden (Action) – a callback executed once the panel has finished hiding.

• OnHide(OnHideHandler onHide)
  • Registers an event handler that is called when the panel is hidden.
  • Parameters: onHide (Panel.OnHideHandler) – the delegate to invoke when hiding.

• HideCloseButton()
  • Hides the default close button from the panel UI.
  • Returns: Panel – allowing fluent method chaining.

• SetFooter(IComponent footer)
  • Sets the footer content for the panel.
  • Parameters: footer (IComponent) – the footer UI element to be displayed.

• Small() / Medium() / Large() / LargeFixed() / ExtraLarge() / FullWidth()
  • Fluent methods to define the panel's size by setting the appropriate PanelSize enum value.
  • Parameters: None.

• Far() / Near()
  • Fluent methods to set the panel's side (PanelSide) to display from the far or near side.
  • Parameters: None.

• LightDismiss() / NoLightDismiss()
  • Enable or disable the ability to hide the panel by clicking on the overlay.
  • Parameters: None.

• Dark()
  • Applies a dark overlay theme to the panel.
  • Parameters: None.

• NonBlocking() / Blocking()
  • Configures whether the panel is non-blocking (allows interaction with the underlying app) or blocking.
  • Parameters: None.

• Content (IComponent)
  • Gets or sets the main content displayed within the panel.

• Footer (IComponent)
  • Gets or sets the footer content of the panel.

• Size (PanelSize)
  • Gets or sets the size of the panel. Supported sizes include Small, Medium, Large, LargeFixed, ExtraLarge, and FullWidth.

• Side (PanelSide)
  • Gets or sets the side of the panel. Use PanelSide.Far or PanelSide.Near to change the panel's entry side.

• CanLightDismiss (bool)
  • Gets or sets whether the panel can be dismissed by clicking the overlay.

• IsDark (bool)
  • Gets or sets if a dark overlay theme is applied to the panel.

• IsNonBlocking (bool)
  • Gets or sets if the panel allows interaction with the underlying UI when displayed.

• ShowCloseButton (bool)
  • Gets or sets the visibility of the panel’s close button.

• Background (string)
  • Gets or sets the background color of the panel.

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

using System;
using Tesserae;
using static Tesserae.UI;

public class PanelSampleUsage
{
    public void OpenPanel()
    {
        // Create a panel with a title and enable light dismiss
        var 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();
    }
}

• Dialog
• Modal