New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

ak-blanket

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ak-blanket

ak-blanket webcomponent

1.1.0
Source
npm

Version published: 9 years ago

Weekly downloads: 4; decreased by-66.67%

Maintainers: 1

Weekly downloads

Created: 9 years ago

Source

Blanket

Setup and install

npm install ak-blanket

Using the component

HTML

The ak-blanket package exports the Blanket Skate component.

Import the component in your JS resource:

bundle.js

import 'ak-blanket';

Now we can use the defined tag in our HTML markup, e.g.:

index.html

<html>
<head>
  <script src="bundle.js"></script>
</head>
<body>
  <!-- ... -->
  <ak-blanket></ak-blanket>
</body>

with other components

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.

React

import Blanket from 'ak-blanket';
import reactify from 'skatejs-react-integration';

const ReactComponent = reactify(Blanket, {});

ReactDOM.render(<ReactComponent />, container);

Blanket API

Properties
- blanket.tinted : Boolean
- blanket.clickable : Boolean

Constructor

Create instances of the component programmatically, or using markup.

JS Example

import Blanket from 'ak-blanket';
const component = new Blanket();

`blanket.tinted` : Boolean

Is 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` : Boolean

If 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

What is ak-blanket?

Is ak-blanket popular?

Is ak-blanket well maintained?

Package last updated on 26 Aug 2016

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.

Install