Security News
npm Updates Search Experience with New Objective Sorting Options
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
@spectrum-web-components/tray
Advanced tools
<sp-tray>
elements are typically used to portray information on mobile device or smaller screens.
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';
<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>
<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.
FAQs
Web component implementation of a Spectrum design Tray
The npm package @spectrum-web-components/tray receives a total of 2,751 weekly downloads. As such, @spectrum-web-components/tray popularity was classified as popular.
We found that @spectrum-web-components/tray demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.