Notifier
Easily show paper-dialog and paper-toast alerts
Notifier
A lightweight library to show paper-toast and paper-dialog alerts easily.
Usage
To use it you have to import notifier module.
import Notifier from '@myfrom/notifier';
The module returns an initialised Notifier class on which you can use methods described in docs.
If you want to use non-module version, you should downgrade to version 1.x.x
Custom options
You can set custom options before you load Notifier by setting NotifierOptions
on window
. Here are the default values:
{
"elementsImported": false, // If set to true, Notifier won't attempt to load its dependencies (check 'Loading dependencies' section).
"stylesLoaded": false, // Same but it's about helper styles (check 'Helper styles section').
"mobileMediaQuery": ["(orientation: landscape) and (max-width: 960px)","(orientation: portrait) and (max-width: 600px)"] // To distinguish between phones and bigger devices. If changed you should also change it in styles.css
}
Loading dependencies
Notifier relies on a few custom elements such as paper-dialog and paper-toast.
By default, they will be loaded using a dynamic import. You can ommit this loading attempt by setting elementsImported
option to true
(look above). However, if you do this and not import necessary files, Notifier will throw an error.
Here are all the necessary files for each function:
`showToast()`
- paper-toast
- paper-button (if includes a button)
`showDialog()`
- paper-dialog
- paper-dialog-scrollable
`askDialog()`
- paper-dialog
- paper-dialog-scrollable
- paper-button
Animations
- neon-animation/web-animations.html
- neon-animation/animations/fade-in-animation.html
- neon-animation/animations/fade-out-animation.html
- neon-animation/animations/slide-from-bottom-animation.html
- neon-animation/animations/slide-down-animation.html
They are also exported as an array from notifier module (elementsToImport
).
Helper styles
Notifier relies on a few styles applied to paper-button in paper-toast. Those styles are not mandatory but ensure there are no weird bugs such as text overlapping with button, etc.
They're automatically loaded but you can skip that by setting stylesLoaded
option to true
). In such case you might want to manually add styles.css to your document.
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- @polymer/neon-animation#3
- @polymer/paper-button#3
- @polymer/paper-dialog#3
- @polymer/paper-dialog-scrollable#3
- @polymer/paper-toast#3
- @polymer/polymer#3
- babel-loader#^8.0.4
- Released
- 2018-12-15
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 3.0+
- Browser
- Browser Independent
Notifier - Vaadin Add-on Directory
Easily show paper-dialog and paper-toast alerts`showToast()`
- paper-toast
- paper-button (if includes a button)
`showDialog()`
- paper-dialog
- paper-dialog-scrollable
`askDialog()`
- paper-dialog
- paper-dialog-scrollable
- paper-button
Animations
- neon-animation/web-animations.html
- neon-animation/animations/fade-in-animation.html
- neon-animation/animations/fade-out-animation.html
- neon-animation/animations/slide-from-bottom-animation.html
- neon-animation/animations/slide-down-animation.html
View on NPM
Notifier version 1.0.0
### Dependencies
* paper-dialog#^2.1.1
* neon-animation#^2.2.1
* polymer#^2
* paper-button#^2.1.0
* paper-toast#^2.1.0
* paper-dialog-scrollable#^2.2.0
* web-animations-js#^2.3.1
Notifier version 1.0.1
### Dependencies
* paper-dialog#^2.1.1
* neon-animation#^2.2.1
* polymer#^2
* paper-button#^2.1.0
* paper-toast#^2.1.0
* paper-dialog-scrollable#^2.2.0
* web-animations-js#^2.3.1
Notifier version 1.0.2
### Dependencies
* paper-dialog#^2.1.1
* neon-animation#^2.2.1
* polymer#^2
* paper-button#^2.1.0
* paper-toast#^2.1.0
* paper-dialog-scrollable#^2.2.0
* web-animations-js#^2.3.1
Notifier version 2.0.0
### Dependencies
* @polymer/neon-animation#3
* @polymer/paper-button#3
* @polymer/paper-dialog#3
* @polymer/paper-dialog-scrollable#3
* @polymer/paper-toast#3
* @polymer/polymer#3
* babel-loader#^8.0.4
Notifier version 2.0.1
### Dependencies
* @polymer/neon-animation#3
* @polymer/paper-button#3
* @polymer/paper-dialog#3
* @polymer/paper-dialog-scrollable#3
* @polymer/paper-toast#3
* @polymer/polymer#3
* babel-loader#^8.0.4