https://github.com/1000ch/x-notification
Declarative Browser Notification as Web Components.
https://github.com/1000ch/x-notification
notification web-components
Last synced: 12 months ago
JSON representation
Declarative Browser Notification as Web Components.
- Host: GitHub
- URL: https://github.com/1000ch/x-notification
- Owner: 1000ch
- License: mit
- Created: 2014-06-09T08:50:01.000Z (about 12 years ago)
- Default Branch: main
- Last Pushed: 2023-03-14T17:36:52.000Z (over 3 years ago)
- Last Synced: 2025-06-18T04:06:22.296Z (12 months ago)
- Topics: notification, web-components
- Language: HTML
- Homepage: https://1000ch.github.io/x-notification/
- Size: 1.83 MB
- Stars: 37
- Watchers: 3
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# x-notification 
> Declarative Browser Notification as Web Components.
## Install
Using [npm](https://www.npmjs.org/package/x-notification):
```sh
$ npm install x-notification
```
## Usage
Import `XNotification` and register it.
```html
import XNotification from 'https://unpkg.com/x-notification';
customElements.define('x-notification', XNotification);
```
Put `` tag.
```html
Notification body
```
If you set `autoshow` attribute, a notification will be shown automatically.
To show it manually, execute `show()` function.
```js
document.querySelector('x-notification').show();
```
## Attributes
### `title=`
**This is a required option** . This will be set as notification title.
### `dir=`
The direction of the notification.
It can be **auto** , **ltr** , or **rtl** .
### `lang=`
Specify the language used within the notification.
### `body=`
A string representing an extra content to display within the notification.
### `tag=`
An ID for a given notification that allows to retrieve, replace or remove it if necessary.
### `icon=`
The URL of an image to be used as an icon by the notification.
### `delay=`
Delay for timing to show notification.
### `timeout=`
Timeout for timing to close notification automatically.
### `autoshow`
If you add this attribute, notification will be shown automatically.
## License
[MIT](https://1000ch.mit-license.org) © [Shogo Sensui](https://github.com/1000ch)