Tesserae

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.

layer-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 LayerExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    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.

layer-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 LayerSampleUsage();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    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();
        }
    }
}