Web component for using the notifications API.

[ This description is mirrored from README.md at github.com/jifalops/app-notifications on 2019-05-22 ]

Published on webcomponents.org

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

<app-notifications id="notifications"></app-notifications>
Title:<br/>
<input id="title" value="title"/><br/>
Options:<br/>
<textarea id="options" rows="3" cols="30">
{"tag": "app", "body": "body", "icon": "demo/icon.png"}
</textarea><br/>
Duration (ms):<br/>
<input id="duration" value="0"/><br/>
<button onclick="_showNotification();">Show Notification</button>
Last event: <span id="feedback"></span>
<script>
  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'; });
  }
</script>

Full demo: webcomponents.org | github.

API: webcomponents.org | github.

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

Install

Link to this version
ImportedReleased 20 May 2017MIT License
Framework Support
Polymer 2.0+
Also supported:
Polymer 1 (0.1.3)
Browser Compatibility
Install with
bower install --save jifalops/app-notifications"#1.0.0"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.0.0

Dependencies

  • polymer#^2.0.0