x-notification

Declarative Browser Notification as Web Components.

Install

Using npm:

$ npm install x-notification

Usage

Import XNotification and register it.

<script type="module">
import XNotification from 'https://unpkg.com/x-notification';

customElements.define('x-notification', XNotification);
</script>

Put <x-notification> tag.

<x-notification autoshow title="Notification Title" delay="1000" timeout="3000" tag="tag">
  Notification body
</x-notification>

If you set autoshow attribute, a notification will be shown automatically.

To show it manually, execute show() function.

document.querySelector('x-notification').show();

Attributes

title=<String>

This is a required option . This will be set as notification title.

dir=<String>

The direction of the notification. It can be auto , ltr , or rtl .

lang=<String>

Specify the language used within the notification.

body=<String>

A string representing an extra content to display within the notification.

tag=<String>

An ID for a given notification that allows to retrieve, replace or remove it if necessary.

icon=<String>

The URL of an image to be used as an icon by the notification.

delay=<Number>

Delay for timing to show notification.

timeout=<Number>

Timeout for timing to close notification automatically.

autoshow

If you add this attribute, notification will be shown automatically.

License

MIT © Shogo Sensui