@spectrum-web-components/tray v0.42.2
Description
<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';
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.
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
6 months ago
7 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
11 months ago
12 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 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
2 years 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
2 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