@spectrum-web-components/underlay
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

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-gray-100);
    }
</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="s">
    <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>

Package Sidebar

Install

npm i @spectrum-web-components/underlay

Weekly Downloads

2,301

Version

1.0.0

License

Apache-2.0

Unpacked Size

68.3 kB

Total Files

46

Last publish

Collaborators

  • caseyisonit
  • rubenc
  • pvashish
  • nikkimk
  • jnjosh
  • taratadobe
  • rajrock38
  • beeduul
  • jianliao79
  • hunterloftis
  • westbrook
  • benjamind
  • cuberoot