https://github.com/jifalops/app-notifications

Web component for using the notifications API.
https://github.com/jifalops/app-notifications

app notification notifications

Last synced: about 1 month ago
JSON representation

Web component for using the notifications API.

• Host: GitHub
• URL: https://github.com/jifalops/app-notifications
• Owner: jifalops
• License: mit
• Created: 2017-03-04T23:19:39.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-08-31T03:42:05.000Z (over 6 years ago)
• Last Synced: 2024-12-15T11:35:25.697Z (about 1 month ago)
• Topics: app, notification, notifications
• Language: HTML
• Size: 2.54 MB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/jifalopsapp-notifications)

[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/jifalopsapp-notifications.svg)](https://vaadin.com/directory/component/jifalopsapp-notifications)

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/jifalops/app-notifications)

# app-notifications

Web component for using the notifications API.

## Installation

```

bower install --save app-notifications

```

## Usage

* Give it an `id` and call the `show()` method.

* Pass event handlers to `show()` or as attributes like `on-show="..."`.

## Demo

```html

Title:





Options:


{"tag": "app", "body": "body", "icon": "demo/icon.png"}




Duration (ms):





Show Notification

Last event: 

  var notifications = document.getElementById('notifications');

  var title = document.getElementById('title');

  var options = document.getElementById('options');

  var duration = document.getElementById('duration');

  var feedback = document.getElementById('feedback');

  _showNotification = function() {

    notifications.show(

      title.value,

      JSON.parse(options.value),

      duration.value,

      function(e, n) { feedback.innerHTML = 'Notification shown'; },

      function(e, n) { feedback.innerHTML = 'Notification clicked'; },

      function(e, n) { feedback.innerHTML = 'Notification closed'; },

      function(e, n) { feedback.innerHTML = 'Notification error'; });

  }

```

Full demo:

[webcomponents.org](https://www.webcomponents.org/element/jifalops/app-notifications/demo/demo/index.html)

| [github](https://jifalops.github.io/app-notifications/components/app-notifications/demo/).

API: [webcomponents.org](https://www.webcomponents.org/element/jifalops/app-notifications/app-notifications)

| [github](https://jifalops.github.io/app-notifications).

## Contributing

1. Fork it on Github.

2. Create your feature branch: `git checkout -b my-new-feature`

3. Commit your changes: `git commit -am 'Add some feature'`

4. Push to the branch: `git push origin my-new-feature`

5. Submit a pull request

## License

[MIT](https://opensource.org/licenses/MIT)