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

1.7.0 • Published 5 months ago

Install

Weekly downloads

-

License

Apache-2.0

Repository

Last release

5 months ago

Overview

<sp-tray> elements are typically used to portray information on mobile device or smaller screens.

Usage

yarn add @spectrum-web-components/tray

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

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

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

import { Tray } from '@spectrum-web-components/tray';

Anatomy

A tray has a single default slot.

<overlay-trigger type="modal">
    <sp-button slot="trigger" variant="secondary">Toggle tray</sp-button>
    <sp-tray slot="click-content">
        <sp-dialog size="s" dismissable>
            <h2 slot="heading">New Messages</h2>
            You have 5 new messages.
        </sp-dialog>
    </sp-tray>
</overlay-trigger>

<overlay-trigger type="modal">
    <sp-button slot="trigger" variant="secondary">Toggle menu</sp-button>
    <sp-tray slot="click-content">
        <sp-menu style="width: 100%">
            <sp-menu-item selected>Deselect</sp-menu-item>
            <sp-menu-item>Select Inverse</sp-menu-item>
            <sp-menu-item focused>Feather...</sp-menu-item>
            <sp-menu-item>Select and Mask...</sp-menu-item>
            <sp-menu-divider></sp-menu-divider>
            <sp-menu-item>Save Selection</sp-menu-item>
            <sp-menu-item disabled>Make Work Path</sp-menu-item>
        </sp-menu>
    </sp-tray>
</overlay-trigger>

Accessibility

<sp-tray> presents a page blocking experience and should be opened with the Overlay API using the modal interaction to ensure that the content appropriately manages the presence of other content in the tab order of the page and the availability of that content for a screen reader.

design-system spectrum adobe adobe-spectrum web components web-components lit-element lit-html component css

@spectrum-web-components/base @spectrum-web-components/modal @spectrum-web-components/reactive-controllers @spectrum-web-components/shared @spectrum-web-components/underlay

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

6 months ago

0.0.0-20250211061642

9 months ago

0.0.0-20241211110529

11 months ago

1.7.0-snapshot.20250519151006

6 months ago

0.0.0-20241209155954

11 months ago

8 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

0.0.0-20250210092211

9 months ago

8 months ago

7 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

0.0.0-20250327111926

8 months ago

1.7.0-snapshot.20250519143559

6 months ago

0.0.0-20241211115453

11 months ago

8 months ago

8 months ago

7 months ago

0.0.0-20250210095839

9 months ago

8 months ago

1.7.0-snapshot.20250609112703

5 months ago

1 year ago

1 year ago

0.0.0-20241211113516

11 months ago

12 months ago

1.0.1-color-testing

11 months ago

12 months ago

1 year ago

12 months ago

12 months ago

12 months ago

1.3.0-testing.0

8 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

1 year ago

12 months ago

1 year ago

1 year ago

12 months ago

1 year ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

9 months ago

9 months ago

0.0.0-20250210074307

9 months ago

9 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

8 months ago

12 months ago

12 months ago

11 months ago

12 months ago

0.0.0-20241211111227

11 months ago

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

9 months ago

12 months ago

9 months ago

12 months ago

1.6.1-preview-2d9fabee.20250507183133

6 months ago

0.0.0-20250210113716

9 months ago

0.0.0-20241211112232

11 months ago

11 months ago

0.0.0-20250210080630

9 months ago

9 months ago

0.0.0-20241211071818

11 months ago

9 months ago

9 months ago

9 months ago

9 months ago

0.0.0-20250210081721

9 months ago

9 months ago

9 months ago

9 months ago

0.0.0-20250210104349

9 months ago

0.0.0-20241211070850

11 months ago

5 months ago

7 months ago

0.0.0-20241211112924

11 months ago

1.7.0-snapshot.20250519200040

6 months ago

9 months ago

9 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

6 months ago

9 months ago

0.0.0-20250410163257

7 months ago

0.0.0-modal-performance-20250414163725

7 months ago

8 months ago

0.0.0-20250210075156

9 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

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

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.33.3-overlay.66

2 years ago

0.33.3-overlay.65

2 years ago

0.33.3-overlay.61

2 years ago

0.31.1-react.21

2 years ago

2 years ago

2 years ago

2 years ago

0.30.1-overlay.30

3 years ago

0.33.1-overlay.39

2 years ago

0.30.1-overlay.31

3 years ago

2 years ago

2 years ago

0.30.1-overlay.38

2 years ago

0.30.1-overlay.37

3 years ago

0.30.1-overlay.41

2 years ago

0.30.1-overlay.42

2 years ago

0.30.1-overlay.40

2 years ago

3 years ago

0.33.1-overlay.41

2 years ago

0.32.1-overlay.33

2 years ago

0.32.1-overlay.41

2 years ago

2 years ago

0.31.1-overlay.29

2 years ago

0.5.2-overlay.9

3 years ago

0.5.2-overlay.8

3 years ago

0.5.4-overlay.10

3 years ago

0.5.4-overlay.11

3 years ago

0.5.4-overlay.12

3 years ago

0.5.4-overlay.13

3 years ago

0.5.4-overlay.14

3 years ago

0.5.4-overlay.15

3 years ago

0.5.4-overlay.17

3 years ago

0.5.4-overlay.18

3 years ago

3 years ago

3 years ago

3 years ago

0.5.2-overlay.22

3 years ago

0.5.1-overlay.37

3 years ago

0.4.10-react.75

3 years ago

3 years ago

0.4.10-react.49

3 years ago

0.4.10-react.48

3 years ago

0.4.10-react.50

3 years ago

3 years ago

3 years ago

3 years ago

0.4.9-overlay-warning.19

3 years ago

0.4.10-react.32

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.4.0-devmode.0

3 years ago

0.3.13-devmode2.0

3 years ago

0.3.12-devmode.7

3 years ago

0.3.12-devmode.0

3 years ago

3 years ago

3 years ago

3 years ago

0.3.13-devmode.0

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

0.3.3-express.9

4 years ago

0.2.4-express.12

4 years ago

0.2.3-express.0

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

0.1.1-lit-next.0

4 years ago

4 years ago

0.0.8-lit-next.47

4 years ago

0.0.8-lit-next.24

4 years ago

0.0.8-lit-next.0

4 years ago

4 years ago

0.0.7-lit-next.42

4 years ago

0.0.7-lit-next.0

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

4 years ago

4 years ago

4 years ago