Tesserae - Layer

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

API reference

class

Layer

public sealed class Layer : Layer<Layer>

A Layer is a technical component that does not have specific Design guidance. Layers are used to render content outside of a DOM tree, at the end of the document. This allows content to escape traditional boundaries caused by "overflow: hidden" css rules and keeps it on the top without using z-index rules. This is useful for example in ContextualMenu and Tooltip scenarios, where the content should always overlay everything else. This non-generic Layer class is appropriate when the core Layer functionality is all that you require and none of its behaviours need to be extended - should you need a Layer base class that CAN be derived from (such as the ContextMenu, for example), use the generic Layer class. The reason for the two classes is to avoid confusion as this can NOT be derived from and the generic version MUST be derived from. The generic version exists to maintain the type of component in chained calls made on the ComponentBase class that they both are derived from (when the OnClick method is called on a ContextMenu then you expect a ContextMenu to be returned and not simply a Layer instance).

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

Layer

Description

Usage

API reference

Samples

Basic Layer Usage

See also