Author: | alihesari |
---|---|
Views Total: | 995 views |
Official Page: | Go to website |
Last Update: | December 22, 2018 |
License: | MIT |
Preview:

Description:
notice.js is a small vanilla JavaScript notification plugin to display stackable temporary notice bars with progress bars representing the remaining time.
More features:
- 4 preset types.
- Modal mode: shows a background overlay when the notification is opened.
- LTR or RTL support.
- Custom open/close animations.
How to use it:
Install & download the package.
# NPM $ npm install notice.js --save
Link to the necessary JavaScript and CSS files.
<link href="noticejs.css" rel="stylesheet"> <script src="notice.js"></script>
Create a new notification instance.
const instance = new NoticeJs({ title: 'Notification title', text: 'Notification message' })
Show the notification on the page.
instance.show();
Set the animation type. Available types:
- Success (default)
- Info
- Warning
- Error
const instance = new NoticeJs({ title: 'Notification title', text: 'Notification message', type: 'error' })
Set the position of the notification. Default: ‘topRight’.
const instance = new NoticeJs({ title: 'Notification title', text: 'Notification message', position: 'topLeft' })
Set the duration of the notification. Default: 3 seconds.
const instance = new NoticeJs({ title: 'Notification title', text: 'Notification message', timeout: 30 })
Add extra CSS3 animations to the notification. In this example, we’re going to use Animate.css for the animations.
const instance = new NoticeJs({ title: 'Notification title', text: 'Notification message', animation: { open: 'animated bounceInRight', close: 'animated bounceOutLeft' } })
More configuration options.
const instance = new NoticeJs({ title: 'Notification title', text: 'Notification message', newestOnTop: false, timeout: 30, progressBar: true, closeWith: ['button'], modal: true, width: 320, scroll: { maxHeightContent: 300, showOnHover: true }, rtl: false })
Callback functions.
const instance = new NoticeJs({ title: 'Notification title', text: 'Notification message', callbacks: { beforeShow: [], onShow: [], afterShow: [], onClose: [], afterClose: [], onClick: [], onHover: [], onTemplate: [] } })