sp-tray

NPM

0.44.0

Storybook

View Storybook
Examples API Changelog

Attributes and Properties #

Property Attribute Type Default Description open open boolean false

Slots #

Name Description default slot content to display within the Tray

Events #

Name Type Description close Event Announces that the Tray has been closed.

0.44.0 (2024-07-15) #

Note: Version bump only for package @spectrum-web-components/tray

0.43.0 (2024-06-11) #

Note: Version bump only for package @spectrum-web-components/tray

0.42.5 (2024-05-24) #

Note: Version bump only for package @spectrum-web-components/tray

0.42.4 (2024-05-14) #

Note: Version bump only for package @spectrum-web-components/tray

0.42.3 (2024-05-01) #

Note: Version bump only for package @spectrum-web-components/tray

0.42.2 (2024-04-03) #

Note: Version bump only for package @spectrum-web-components/tray

0.42.1 (2024-04-02) #

Note: Version bump only for package @spectrum-web-components/tray

0.42.0 (2024-03-19) #

Features #

  • asset: use core tokens (99e76f4)

0.41.2 (2024-03-05) #

Note: Version bump only for package @spectrum-web-components/tray

0.41.1 (2024-02-22) #

Note: Version bump only for package @spectrum-web-components/tray

0.41.0 (2024-02-13) #

Bug Fixes #

  • tray: only allow "click" events when they "pointerdown"ed on the Underlay (#4020) (4f9aa4a)

0.40.5 (2024-02-05) #

Note: Version bump only for package @spectrum-web-components/tray

0.40.4 (2024-01-29) #

Note: Version bump only for package @spectrum-web-components/tray

0.40.3 (2024-01-11) #

Note: Version bump only for package @spectrum-web-components/tray

0.40.2 (2023-12-18) #

Note: Version bump only for package @spectrum-web-components/tray

0.40.1 (2023-12-05) #

Note: Version bump only for package @spectrum-web-components/tray

0.40.0 (2023-11-16) #

Note: Version bump only for package @spectrum-web-components/tray

0.39.4 (2023-11-02) #

Note: Version bump only for package @spectrum-web-components/tray

0.39.3 (2023-10-18) #

Note: Version bump only for package @spectrum-web-components/tray

0.39.2 (2023-10-13) #

Note: Version bump only for package @spectrum-web-components/tray

0.39.1 (2023-10-06) #

Note: Version bump only for package @spectrum-web-components/tray

0.39.0 (2023-09-25) #

Note: Version bump only for package @spectrum-web-components/tray

0.38.0 (2023-09-05) #

Bug Fixes #

  • picker: ensure the Menu opens in a Tray on mobile (6be2bed)

0.37.0 (2023-08-18) #

Note: Version bump only for package @spectrum-web-components/tray

0.36.0 (2023-08-18) #

Note: Version bump only for package @spectrum-web-components/tray

0.35.0 (2023-07-31) #

Note: Version bump only for package @spectrum-web-components/tray

0.34.0 (2023-07-11) #

Note: Version bump only for package @spectrum-web-components/tray

0.33.2 (2023-06-14) #

Note: Version bump only for package @spectrum-web-components/tray

0.33.0 (2023-06-08) #

Note: Version bump only for package @spectrum-web-components/tray

0.32.0 (2023-06-01) #

Note: Version bump only for package @spectrum-web-components/tray

0.31.0 (2023-05-17) #

Note: Version bump only for package @spectrum-web-components/tray

0.30.0 (2023-05-03) #

Bug Fixes #

  • centralize updated first focusable selector (300e84c)
  • correct the relationship between overlayWillCloseCallback and phased animations (c63db8d)
  • dialog: normalize sizing technique to align with future t-shirt size usage (da33797)
  • leverage "dvh" rather than measured screen height (84b9df0)
  • tray: add tray pattern (0915fa5)
  • tray: include correct dependency listing (51cb231)

Features #

  • adopt DNA@7 base Spectrum CSS (e08cafd)
  • include all Dev Mode files in side effects (f70817c)
  • picker: support responsive delivery of menu (20031d1)
  • shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
  • tray: use spectrum tokens (cdd78b2)
  • update lit-* dependencies, wip (377f3c8)

0.5.3 (2023-04-24) #

Note: Version bump only for package @spectrum-web-components/tray

0.5.2 (2023-04-05) #

Note: Version bump only for package @spectrum-web-components/tray

0.5.1 (2023-03-22) #

Note: Version bump only for package @spectrum-web-components/tray

0.5.0 (2023-02-08) #

Features #

  • tray: use spectrum tokens (cdd78b2)

0.4.9 (2023-01-23) #

Note: Version bump only for package @spectrum-web-components/tray

0.4.8 (2023-01-09) #

Note: Version bump only for package @spectrum-web-components/tray

0.4.7 (2022-12-08) #

Bug Fixes #

  • leverage "dvh" rather than measured screen height (84b9df0)

0.4.6 (2022-11-21) #

Note: Version bump only for package @spectrum-web-components/tray

0.4.5 (2022-11-14) #

Note: Version bump only for package @spectrum-web-components/tray

0.4.4 (2022-10-28) #

Note: Version bump only for package @spectrum-web-components/tray

0.4.3 (2022-10-17) #

Bug Fixes #

  • correct the relationship between overlayWillCloseCallback and phased animations (c63db8d)

0.4.2 (2022-10-10) #

Note: Version bump only for package @spectrum-web-components/tray

0.4.1 (2022-09-14) #

Note: Version bump only for package @spectrum-web-components/tray

0.4.0 (2022-08-09) #

Features #

  • include all Dev Mode files in side effects (f70817c)

0.3.12 (2022-08-04) #

Note: Version bump only for package @spectrum-web-components/tray

0.3.11 (2022-07-18) #

Note: Version bump only for package @spectrum-web-components/tray

0.3.10 (2022-06-29) #

Note: Version bump only for package @spectrum-web-components/tray

0.3.9 (2022-06-07) #

Note: Version bump only for package @spectrum-web-components/tray

0.3.8 (2022-05-27) #

Note: Version bump only for package @spectrum-web-components/tray

0.3.7 (2022-05-12) #

Note: Version bump only for package @spectrum-web-components/tray

0.3.6 (2022-04-21) #

Note: Version bump only for package @spectrum-web-components/tray

0.3.5 (2022-03-30) #

Note: Version bump only for package @spectrum-web-components/tray

0.3.4 (2022-03-08) #

Note: Version bump only for package @spectrum-web-components/tray

0.3.3 (2022-03-04) #

Note: Version bump only for package @spectrum-web-components/tray

0.3.2 (2022-02-22) #

Note: Version bump only for package @spectrum-web-components/tray

0.3.1 (2022-02-03) #

Bug Fixes #

  • tray: include correct dependency listing (51cb231)

0.3.0 (2022-02-02) #

Features #

  • picker: support responsive delivery of menu (20031d1)

0.2.3 (2022-01-26) #

Note: Version bump only for package @spectrum-web-components/tray

0.2.2 (2022-01-07) #

Note: Version bump only for package @spectrum-web-components/tray

0.2.1 (2021-12-13) #

Note: Version bump only for package @spectrum-web-components/tray

0.2.0 (2021-11-08) #

Features #

  • update lit-* dependencies, wip (377f3c8)

0.1.1 (2021-11-08) #

Note: Version bump only for package @spectrum-web-components/tray

0.1.0 (2021-11-02) #

Bug Fixes #

  • centralize updated first focusable selector (300e84c)

Features #

  • adopt DNA@7 base Spectrum CSS (e08cafd)

0.0.7 (2021-09-20) #

Note: Version bump only for package @spectrum-web-components/tray

0.0.6 (2021-08-24) #

Note: Version bump only for package @spectrum-web-components/tray

0.0.5 (2021-08-17) #

Bug Fixes #

  • dialog: normalize sizing technique to align with future t-shirt size usage (da33797)

0.0.4 (2021-07-22) #

Note: Version bump only for package @spectrum-web-components/tray

0.0.3 (2021-06-16) #

Note: Version bump only for package @spectrum-web-components/tray

0.0.2 (2021-05-24) #

Bug Fixes #

  • tray: add tray pattern (0915fa5)

Description #

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

Usage #

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

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';

Dialog #

<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>

Menu #

<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.