sp-underlay

Examples API

Attributes and Properties #

Property Attribute Type Default Description
dir dir 'ltr' | 'rtl' 'ltr'
open open boolean false

CSS Custom Properties #

Name Default
--spectrum-dialog-confirm-background-entry-animation-delay 0ms
--spectrum-dialog-confirm-background-entry-animation-duration var(--spectrum-global-animation-duration-600)
--spectrum-dialog-confirm-background-entry-animation-ease var(--spectrum-global-animation-linear)
--spectrum-dialog-confirm-background-exit-animation-delay var(--spectrum-global-animation-duration-200)
--spectrum-dialog-confirm-background-exit-animation-duration var(--spectrum-global-animation-duration-300)
--spectrum-dialog-confirm-background-exit-animation-ease var(--spectrum-global-animation-linear)
--spectrum-dialog-confirm-overlay-background-color var(--spectrum-alias-background-color-modal-overlay)

Description #

An <sp-underlay> is used primarily in concert with elements similar to <sp-dialog> that lay over the rest of your page to deliver a blocking layer between those two contexts. See this element in action as part of the <sp-dialog-wrapper> element.

Usage #

See it on NPM! How big is this package in your project?

yarn add @spectrum-web-components/underlay

Import the side effectful registration of <sp-underlay> via:

import '@spectrum-web-components/underlay/sp-underlay.js';

When looking to leverage the Underlay base class as a type and/or for extension purposes, do so via:

import { Underlay } from '@spectrum-web-components/underlay';

Example #

When leveraging an <sp-underlay> in conjunction with overlay content, place it as a sibling prior to your overlay content.

<style>
sp-underlay:not([open]) + sp-dialog {
display: none;
}
sp-underlay + sp-dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
background: var(
--spectrum-dialog-confirm-background-color,
var(--spectrum-alias-background-color-default)
);
}
</style>

<sp-button
onclick="
console.log(this.nextElementSibling);
this.nextElementSibling.open = true;
"

>

Open dialog with underlay element
</sp-button>

<sp-underlay></sp-underlay>
<sp-dialog size="small">
<h1 slot="heading">Hello, I'm an overlay!</h1>
<p>Enjoy your day...</p>
<sp-button
slot="button"
onclick="
this.parentElement.previousElementSibling.open = false;
"

>

Close
</sp-button>
</sp-dialog>