https://github.com/samthor/airhorn-overlay

Airhorn Web Component
https://github.com/samthor/airhorn-overlay

airhorn webcomponents

Last synced: 2 days ago
JSON representation

Airhorn Web Component

• Host: GitHub
• URL: https://github.com/samthor/airhorn-overlay
• Owner: samthor
• License: apache-2.0
• Created: 2018-04-16T04:32:28.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-04-16T07:34:13.000Z (over 6 years ago)
• Last Synced: 2024-10-13T07:48:03.581Z (about 1 month ago)
• Topics: airhorn, webcomponents
• Language: JavaScript
• Homepage: https://samthor.github.io/airhorn-overlay
• Size: 34.2 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Airhorn Web Component.

Quick, [load the demo](https://samthor.github.io/airhorn-overlay)! 📢

```html

Horn!

```

Distributed as an ES6 module.

Requires Custom Elements and Shadow DOM.

## Usage

```html

This content is fine, but if you click on me, I'll become very loud.

```

To make the airhorn take up more space, just style the element like you would any block element.

It can be made to contain your entire site's content, or just one feature area etc.

### Customize

Set the `disabled` attribute to disable the airhorn.

Additionally, set `overflow: hidden` on the CSS of element to 'contain' the airhorn to its bounds, rather than expanding out onto the page.

## Install

Install `airhorn-overlay` on NPM and include the ES6 module:

```js

import {AirhornOverlayElement} from './node_modules/airhorn-overlay/airhorn-overlay.js';

// or maybe your transpiler supports...

import `airhorn-overlay`;

```