@spectrum-web-components/underlay NPM | npm.io

0.42.2 • Published 27 days ago

Install

Weekly downloads

259

License

Apache-2.0

Repository

Last release

27 days ago

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

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>

spectrum css web components lit-element lit-html

@spectrum-web-components/base

@infinitebrahmanuniverse/nolb-_spe @everything-registry/sub-chunk-857 @spectrum-web-components/tray @spectrum-web-components/bundle @spectrum-web-components/dialog @swc-react/underlay

27 days ago

28 days ago

1 month ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

5 months ago

9 months ago

6 months ago

9 months ago

9 months ago

10 months ago

9 months ago

9 months ago

9 months ago

8 months ago

9 months ago

10 months ago

9 months ago

9 months ago

7 months ago

7 months ago

9 months ago

6 months ago

7 months ago

7 months ago

0.33.3-overlay.66

10 months ago

0.33.3-overlay.65

10 months ago

0.33.3-overlay.61

10 months ago

0.31.1-react.21

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

0.30.1-overlay.30

12 months ago

0.33.1-overlay.39

11 months ago

0.30.1-overlay.31

12 months ago

11 months ago

11 months ago

0.30.1-overlay.38

12 months ago

0.30.1-overlay.37

12 months ago

0.30.1-overlay.41

12 months ago

0.30.1-overlay.42

12 months ago

0.30.1-overlay.40

12 months ago

12 months ago

0.33.1-overlay.41

11 months ago

0.32.1-overlay.33

11 months ago

0.32.1-overlay.41

11 months ago

12 months ago

0.31.1-overlay.29

12 months ago

0.9.10-overlay.12

1 year ago

0.9.10-overlay.13

1 year ago

0.9.10-overlay.10

1 year ago

0.9.10-overlay.11

1 year ago

0.9.10-overlay.17

1 year ago

0.9.10-overlay.14

1 year ago

0.9.10-overlay.15

1 year ago

1 year ago

1 year ago

1 year ago

0.9.10-overlay.18

1 year ago

0.9.8-overlay.9

1 year ago

0.9.8-overlay.8

1 year ago

0.9.8-overlay.22

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.9.5-overlay-warning.19

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

0.9.0-devmode.0

2 years ago

2 years ago

0.8.12-devmode.0

2 years ago

2 years ago

2 years ago

0.8.12-devmode2.0

2 years ago

0.8.11-devmode.7

2 years ago

0.8.11-devmode.0

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.8.4-express.9

2 years ago

0.8.3-express.12

2 years ago

0.8.2-express.41

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.7.1-lit-next.0

2 years ago

2 years ago

0.6.10-lit-next.47

3 years ago

0.6.10-lit-next.24

3 years ago

3 years ago

0.6.10-lit-next.0

3 years ago

0.6.9-lit-next.56

3 years ago

0.6.9-lit-next.14

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.3.4-alpha.178

3 years ago

3 years ago

3 years ago

0.3.4-alpha.169

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago