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:
A blocking overlay stops the page behind it scrolling, and NonBlocking() gives that up along with the rest of the blocking behaviour, including while it is already open. The lock itself belongs to Layers, not to this component: it remembers whatever the application had on the body and puts exactly that back once the last locking overlay has gone, so overlapping overlays can close in any order and an app shell that declares its own body overflow keeps it. See Layer.
API reference
public sealed class Panel : Layer<Panel>, IHasBackgroundColor, IBindableComponent<bool>A side-anchored slide-in panel (drawer) typically used for property inspectors and detail views.
- Namespace
- Tesserae
- Inheritance
- Layer<Panel> → Panel
- Implements
- IHasBackgroundColor, IBindableComponent<bool>
Constructors
| Name | Description |
|---|---|
| Panel | Initializes a new instance of this class. |
| Overload | |
|---|---|
| Panel(string) | Initializes a new instance of this class. |
| Panel(IComponent) | Initializes a new instance of this class. |
Properties
| Name | Description |
|---|---|
| Content | Sets the content rendered inside the surface. |
| Footer | Gets or sets the footer of the component. |
| Size | Gets or sets the size of the component. |
| Side | Gets or sets which side of the parent the component is anchored to. |
| CanLightDismiss | Gets or sets a value indicating whether the surface can be dismissed by clicking outside it (light dismiss). |
| IsDark | Gets or sets a value indicating whether the component uses the dark colour theme. |
| IsNonBlocking | Gets or sets a value indicating whether the surface is non-blocking (allows interaction with the page beneath it). |
| LocksPageScroll | A blocking panel stops the page behind it scrolling; a modeless one does not. |
| ShowCloseButton | Gets or sets a value indicating whether the close button is shown. |
| Background | Gets or sets the CSS background of the component. |
public override IComponent Content { get ; set ; }Sets the content rendered inside the surface.
public PanelSide Side { get ; set ; }Gets or sets which side of the parent the component is anchored to.
public bool CanLightDismiss { get ; set ; }Gets or sets a value indicating whether the surface can be dismissed by clicking outside it (light dismiss).
public bool IsDark { get ; set ; }Gets or sets a value indicating whether the component uses the dark colour theme.
public bool IsNonBlocking { get ; set ; }Gets or sets a value indicating whether the surface is non-blocking (allows interaction with the page beneath it).
protected override bool LocksPageScrollA blocking panel stops the page behind it scrolling; a modeless one does not.
public bool ShowCloseButton { get ; set ; }Gets or sets a value indicating whether the close button is shown.
Methods
| Name | Description |
|---|---|
| Show | Shows the component. |
| OnHide | Registers a callback invoked when the hide event fires. |
| Hide | Hides the component. |
| AsObservable | Returns an observable that tracks the visibility of the panel. |
| SetBoundValue | Programmatically shows or hides the panel as part of a two-way binding. |
| HideCloseButton | Hides the close button. |
| SetFooter | Sets the footer of the component. |
| Small | Renders the component at small size. |
| Medium | Renders the component at medium size. |
| Large | Renders the component at large size. |
| LargeFixed | Renders the component at large size with a fixed width. |
| ExtraLarge | Renders the component at extra-large size. |
| FullWidth | Stretches the component to the full width of its parent. |
| Far | Anchors the component to the far side of its parent. |
| Near | Anchors the component to the near side of its parent. |
| LightDismiss | Enables light-dismiss behaviour (clicking outside the surface closes it). |
| NoLightDismiss | Removes / disables the light dismiss on the component. |
| Dark | Applies the dark colour scheme to the component. |
| NonBlocking | Makes the surface non-blocking, allowing interaction with the page beneath it. |
| Blocking | Makes the surface blocking (the default — interaction with the page beneath is prevented). |
public Panel OnHide(OnHideHandler onHide)Registers a callback invoked when the hide event fires.
public IObservable<bool> AsObservable()Returns an observable that tracks the visibility of the panel.
public void SetBoundValue(bool value)Programmatically shows or hides the panel as part of a two-way binding.
public Panel LargeFixed()Renders the component at large size with a fixed width.
public Panel FullWidth()Stretches the component to the full width of its parent.
public Panel LightDismiss()Enables light-dismiss behaviour (clicking outside the surface closes it).
public Panel NoLightDismiss()Removes / disables the light dismiss on the component.
public Panel NonBlocking()Makes the surface non-blocking, allowing interaction with the page beneath it.
Samples
Basic Panel with Footer and Light Dismiss
This example demonstrates how to create a panel with custom content and footer, enable light dismiss, and display the panel.