ak-blanket
Advanced tools
npm install ak-blanket
The ak-blanket package exports the Blanket Skate component.
Import the component in your JS resource:
import 'ak-blanket';
Now we can use the defined tag in our HTML markup, e.g.:
<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('ak-blanket-blur', doSomethingWhenBlanketClicked(elem));
},
detached(elem) {
window.removeEventListener('ak-blanket-blur', doSomethingWhenBlanketClicked(elem));
},
render(elem) {
return (
<div>
<ak-blanket clickable tinted />
<div>the rest of the awesome component here</div>
</div>
);
})
It emits the 'ak-blanket-blur' 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/disapper with the parent element.
import Blanket from 'ak-blanket';
import reactify from 'skatejs-react-integration';
const ReactComponent = reactify(Blanket, {});
ReactDOM.render(<ReactComponent />, container);
Properties
blanket.tinted : Booleanblanket.clickable : BooleanCreate instances of the component programmatically, or using markup.
JS Example
import Blanket from 'ak-blanket';
const component = new Blanket();
blanket.tinted : 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
blanket.clickable : BooleanIf click on the blanket emits a 'blanket-click' event.
Kind: instance property of Blanket
Default: false
HTML Example
<ak-blanket clickable></ak-blanket>
JS Example
component.clickable = true
FAQs
A React component that covers the underlying UI for a layered component.
The npm package ak-blanket receives a total of 40 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.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.