app-notifications
Web component for using the notifications API.
Installation
bower install --save app-notifications
Usage
- Give it an
id
and call theshow()
method. - Pass event handlers to
show()
or as attributes likeon-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
- Fork it on Github.
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request