@advanced-rest-client/arc-overlay-mixin
Advanced tools
Readme
This mixin is a port of iron-overlay-behavior that works with LitElement.
Use ArcOverlayMixin to implement an element that can be hidden
or shown, and displays on top of other content. It includes an optional
backdrop, and can be used to implement a variety of UI controls including
dialogs and drop downs. Multiple overlays may be displayed at once.
See the demo source code for an example.
npm i @advanced-rest-client/arc-overlay-mixin
import { LitElement } from 'lit-element';
import { ArcOverlayMixin } from '@advanced-rest-client/arc-overlay-mixin';
class ArcOverlayImpl extends ArcOverlayMixin(LitElement) {
static get properties() {
return {
myProp: { type: String }
};
}
}
An overlay may be hidden by closing or canceling. The difference between close
and cancel is user intent. Closing generally implies that the user
acknowledged the content on the overlay. By default, it will cancel whenever
the user taps outside it or presses the escape key. This behavior is
configurable with the nocancelonesckey and the
nocancelonoutsideclick properties. close() should be called explicitly
by the implementer when the user interacts with a control in the overlay
element. When the dialog is canceled, the overlay fires an
'iron-overlay-canceled' event. Call preventDefault on this event to prevent
the overlay from closing.
By default the element is sized and positioned to fit and centered inside the
window. You can position and size it manually using CSS. See ArcFitMixin.
Set the withbackdrop attribute to display a backdrop behind the overlay.
The backdrop is appended to <body> and is of type <iron-overlay-backdrop>.
See its doc page for styling options.
In addition, with-backdrop will wrap the focus within the content in the
light DOM. Override the _focusableNodes getter to achieve a different behavior.
The element is styled to appear on top of other content by setting its
z-index property. You must ensure no element has a stacking context with a
higher z-index than its parent stacking context. You should place this
element as a child of <body> whenever possible.
npm run test
npm start
FAQs
arc-overlay-mixin is a port of iron-overlay-behavior that works with web components
The npm package @advanced-rest-client/arc-overlay-mixin receives a total of 1,410 weekly downloads. As such, @advanced-rest-client/arc-overlay-mixin popularity was classified as popular.
We found that @advanced-rest-client/arc-overlay-mixin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 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
Socket CEO Feross Aboukhadijeh joins a16z partners to discuss how modern, sophisticated supply chain attacks require AI-driven defenses and explore the challenges and solutions in leveraging AI for threat detection early in the development life cycle.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.