ak-blanket
Advanced tools
The main purpose of the blanket component is to provide the overlay layer for components such as a modal dialog or a tooltip.
Interact with a live demo of the ak-blanket component.
npm install ak-blanket
The ak-blanket package exports the Blanket Skate component.
Import the component in your JS resource:
import 'ak-blanket';
Now you can use the defined tag in your HTML markup, for example:
<html>
<head>
<script src="bundle.js"></script>
</head>
<body>
<!-- ... -->
<ak-blanket></ak-blanket>
</body>
The main purpose of the blanket component is to provide the overlay layer for components such as modal dialog or tooltip. It can be achieved like this:
define('modal-dialog-component', () => {
attached(elem) {
window.addEventListener('activate', doSomethingWhenBlanketClicked(elem));
},
detached(elem) {
window.removeEventListener('activate', doSomethingWhenBlanketClicked(elem));
},
render(elem) {
return (
<div>
<ak-blanket clickable tinted />
<div>the rest of the awesome component here</div>
</div>
);
})
It emits the 'activate' event when clicked/touched.
Blanket component doesn't have the z-index style, so make sure you put it into an appropriate DOM position.
For the purpose of simplicity blanket doesn't have any show/hide functionality. Since the main use of it suppose to be inside popup elements it would appear/disappear with the parent element.
This is a standard web component, if you want to use it in your React app, use the Skate.js React integration.
import Blanket from 'ak-blanket';
import reactify from 'skatejs-react-integration';
const ReactComponent = reactify(Blanket, {});
ReactDOM.render(<ReactComponent />, container);
Kind: global class
Properties
BooleanBooleanEvents
Create instances of the component programmatically, or using markup.
JS Example
import Blanket from 'ak-blanket';
const component = new Blanket();
BooleanIs blanket grey with opacity or transparent. By default it's transparent.
Kind: instance property of Blanket
Default: false
HTML Example
<ak-blanket tinted></ak-blanket>
JS Example
component.tinted = true
BooleanWhether the blanket is clickable.
Kind: instance property of Blanket
Default: false
Emits: activate
HTML Example
<ak-blanket clickable></ak-blanket>
JS Example
component.clickable = true
This event is emitted when the blanket is clicked. The emission of this event can be controlled by the clickable property.
Kind: event emitted by Blanket
Let us know what you think of our components and docs, your feedback is really important for us.
Ask a question in our forum.
Check if someone has already asked the same question before.
Are you in trouble? Let us know!
FAQs
A React component that covers the underlying UI for a layered component.
The npm package ak-blanket receives a total of 9 weekly downloads. As such, ak-blanket popularity was classified as not popular.
We found that ak-blanket demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.