# Layer

# Description

The Layer component is a technical utility used to render content outside the main DOM tree, appending it at the end of the document. This approach bypasses layout restrictions such as CSS "overflow: hidden" and ensures that layered content (such as contextual menus or tooltips) always appears above the rest of the UI without relying on z-index manipulation.

# Usage

Instantiate a Layer using the static helper method from Tesserae.UI. Use the Content method to set the inner content that should be rendered within the Layer. The visibility of the Layer can be controlled via the IsVisible property, and you may optionally provide a hosting container using the Host property to control where the Layer's content gets projected.

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

public class LayerExample : IComponent
{
    public HTMLElement Render()
    {
        // Create a Layer component
        var layer = Layer();

        // Set the content of the layer using a horizontal stack container
        layer.Content(
            HStack().Children(
                TextBlock("This content is rendered in a Layer."),
                Button("Toggle Layer")
                    .Primary()
                    .OnClick((s, e) => layer.IsVisible = !layer.IsVisible)
            )
        );

        // Make the layer visible
        layer.IsVisible = true;

        return layer.Render();
    }
}

# Methods

Content(IComponent content)
Sets the inner content of the Layer.
• content: An IComponent instance representing the content to be rendered within the Layer.

# Properties

IsVisible (bool)
Gets or sets a value indicating whether the Layer is currently visible.
Host (IComponent)
Gets or sets the host component that controls where the Layer's content is projected. Providing a host causes the Layer to render within that container instead of being appended at the end of the document.

# Samples

# Basic Layer Usage

This sample demonstrates how to create a Layer, set its content, and toggle its visibility using a button click.

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

public class LayerSampleUsage : IComponent
{
    public HTMLElement Render()
    {
        // Instantiate Layer and an optional host container
        var layer = Layer();
        var layerHost = LayerHost();

        // Setup content for the main Layer including a toggle control
        layer.Content(
            HStack().Children(
                TextBlock("Layer Content: Always visible on top."),
                Button("Toggle Layer")
                    .Primary()
                    .OnClick((s, e) => layer.IsVisible = !layer.IsVisible)
            )
        );

        // Optionally assign the Layer host to change rendering projection
        // Uncomment the next line to render the layer within a specific host
        // layer.Host = layerHost;

        // Initially set the layer as visible
        layer.IsVisible = true;

        return layer.Render();
    }
}

# See also

Dialog
Modal