Troublete Elements: Overlay

General purpose overlay webcomponent

This component represents a general purpose overlay, that can be used as modal background or similar use-cases where it is neccessary to cover the whole parent element. (!) The only requirement is that the parent element has the style property position set to relative.

Install

$ npm i -S troublete-elements-overlay

Demo Usage

<link rel="import" href="te-overlay.html">
...
 
<section style="position:relative; height:250px; width: 400px">
    <te-overlay>
        // content
    </te-overlay>
</section>

Properties

• hidden (bool) - will determine if overlay is shown

Methods

• show() - will trigger the overlay to show up
• hide() - will trigger the overlay to hide
• toggle() - will toggle the visibility of the overlay

Contribute

1. Fork repository & install requirements with $ npm i
2. Change component
3. Run tests with $ npm run test
4. If tests pass, file a PR