Demo
Here's the simplest functionality. Click on those buttons to see Notifier in action:
btnBasicToast.addEventListener('click', () =>
// Target is the clicked button in the toast
Notifier.showToast('Hey!', { btnText: 'Hello', btnFunction: e => e.target.parentElement.close() })
);
btnBasicDialog.addEventListener('click', () =>
Notifier.showDialog('Hello world!', 'Look at this beautiful demo')
);
Here you can witness a pre-formatted dialog:
btnFormattedDialog.addEventListener('click', () =>
Notifier.showDialog('I\'m so well formatted', `
<paper-dialog-scrollable>
Such a nice content here.
<hr noshadow>
And there's even our banner!
<img src="banner.png">
</paper-dialog-scrollable>
<div class="buttons">
<paper-button class="first">First, lol</paper-button>
<paper-button dialog-dismiss>Meh</paper-button>
<paper-button autofocus dialog-confirm>I'm amazed</paper-button>
</div>
`, {
attributes: {
id: 'formatted-dialog'
},
formatted: true
})
);
#formatted-dialog .first {
margin-right: auto;
}
And at the end you can see shortcut method for question dialog:
btnQuestionDialog.addEventListener('click', () =>
Notifier.askDialog('Do you like me?')
);