Layer

Overview

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.

There are some special considerations. Due to the nature of rendering content elsewhere asynchronously, React refs within content will not be resolvable synchronously at the time the Layer is mounted. Therefore, to use refs correctly, use functional refs ref={ (el) => { this._root = el; } rather than string refs ref='root'. Additionally measuring the physical Layer element will not include any of the children, since it won't render it. Events that propgate from within the content will not go through the Layer element as well.

Usage

This is not in a layer
This is a layer host.
This is a layer host.
<LayerHost Id="pageHost"
           style="height:250px;width:400px;background-color:lightyellow;border:1px solid black;position:relative;overflow:hidden;">

</LayerHost>

<Toggle @bind-Checked=@trapPanel Label="Trap Panel in LayerHost" />
<PrimaryButton Text="Open Panel"
               OnClick=@(()=>
            {
panelIsOpen = true;
            }) />


<Panel IsLightDismiss="true"
       HostId=@(trapPanel ? "pageHost" : null)
       IsOpen=@panelIsOpen
       OnDismiss=@(() => panelIsOpen = false)>
    <p>
        Hey, there's some content in here.
    </p>
</Panel>

<Layer>
    <div style="position:absolute;left:50%;top:80%;width:200px;height:200px;background-color:var(--semanticColors-BodyBackgroundHovered);">
        This <b>is</b> in a layer
    </div>
</Layer>