# troublete-overlay

> A simple overlay component

Latest version **1.0.0** (published 2017-05-05) · GPL-2.0 license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install troublete-overlay
pnpm add troublete-overlay
yarn add troublete-overlay
bun add troublete-overlay
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2017-05-05 |
| First published | 2017-05-05 |
| Weekly downloads | 0 |
| License | GPL-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Willi Eßer |
| Maintainers | troublete |
| Keywords | webcomponent, Polymer, overlay, troublete |

## Links

- npm: https://www.npmjs.com/package/troublete-overlay
- npm.io page: https://npm.io/package/troublete-overlay

## Dependencies (1)

- [@polymer/polymer](https://npm.io/package/@polymer/polymer.md) ~1.2.5-npm-test.2

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2017-05-05

## README

# Troublete 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

```bash
$ npm i -S troublete/troublete-overlay
```

## Demo Usage

```html
<link rel="import" href="troublete-overlay.html">
...

<section style="position:relative; height:250px; width: 400px">
    <troublete-overlay>
        // content
    </troublete-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

---
_Source: https://npm.io/package/troublete-overlay · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._