sp-tray

Examples API

Attributes and Properties #

Property Attribute Type Default Description
dir dir 'ltr' | 'rtl' 'ltr'
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.

CSS Custom Properties #

Name Default
--spectrum-dialog-confirm-entry-animation-delay var(--spectrum-global-animation-duration-200)
--spectrum-dialog-confirm-entry-animation-duration var(--spectrum-global-animation-duration-500)
--spectrum-dialog-confirm-exit-animation-delay 0ms
--spectrum-dialog-confirm-exit-animation-duration var(--spectrum-global-animation-duration-100)
--spectrum-tray-border-radius 0px
--spectrum-tray-full-width-border-radius var(--spectrum-alias-border-radius-regular)
--spectrum-tray-max-width 375px
--spectrum-tray-min-height var(--spectrum-global-dimension-static-size-800)
--spectrum-tray-padding-x var(--spectrum-global-dimension-static-size-100)
--spectrum-tray-padding-y 0
--spectrum-tray-width 100%

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 #

<sp-button
variant="secondary"
onclick="
const trigger = this;
const interaction = 'modal';
const content = this.nextElementSibling;
const options = {
offset: 0,
placement: 'none',
receivesFocus: 'auto',
};
Overlay.open(
trigger,
interaction,
content,
options
);
"

>

Toggle tray
</sp-button>
<sp-tray>
<sp-dialog size="small" dismissable>
<h2 slot="heading">New Messages</h2>
You have 5 new messages.
</sp-dialog>
</sp-tray>
<sp-button
variant="secondary"
onclick="
const trigger = this;
const interaction = 'modal';
const content = this.nextElementSibling;
const options = {
offset: 0,
placement: 'none',
receivesFocus: 'auto',
};
Overlay.open(
trigger,
interaction,
content,
options
);
"

>

Toggle menu
</sp-button>
<sp-tray>
<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>

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.