探客时代
Toastify
Pure JavaScript library for better notification messages
README
Toastify
Toastify is a lightweight, vanilla JS toast notification library.
Demo
Features
Multiple stacked notifications
Customizable
No blocking of execution thread
Customization options
Notification Text
Duration
Toast background color
Close icon display
Display position
Offset position
Installation
Toastify now supports installation via NPM
Run the below command to add toastify-js to your exisitng or new project.
- ```
- npm install --save toastify-js
- ```
or
- ```
- yarn add toastify-js -S
- ```
Import toastify-js into your module to start using it.
- ```
- import Toastify from 'toastify-js'
- ```
You can use the default CSS from Toastify as below and later override it or choose to write your own CSS.
- ```
- import "toastify-js/src/toastify.css"
- ```
Adding ToastifyJs to HTML page using the traditional method
To start using Toastify, add the following CSS on to your page.
- ``` html
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
- ```
And the script at the bottom of the page
- ``` html
- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
- ```
Files are delivered via the CDN service provided by jsdeliver
Documentation
- ``` js
- Toastify({
- text: "This is a toast",
- duration: 3000,
- destination: "https://github.com/apvarun/toastify-js",
- newWindow: true,
- close: true,
- gravity: "top", // `top` or `bottom`
- position: "left", // `left`, `center` or `right`
- stopOnFocus: true, // Prevents dismissing of toast on hover
- style: {
- background: "linear-gradient(to right, #00b09b, #96c93d)",
- },
- onClick: function(){} // Callback after click
- }).showToast();
- ```
Toast messages will be centered on devices with screen width less than 360px.
See the changelog
Add own custom classes
If you want to use custom classes on the toast for customizing (like info or warning for example), you can do that as follows:
- ``` js
- Toastify({
- text: "This is a toast",
- className: "info",
- style: {
- background: "linear-gradient(to right, #00b09b, #96c93d)",
- }
- }).showToast();
- ```
Multiple classes also can be assigned as a string, with spaces between class names.
Add some offset
If you want to add offset to the toast, you can do that as follows:
- ``` js
- Toastify({
- text: "This is a toast with offset",
- offset: {
- x: 50, // horizontal axis - can be a number or a string indicating unity. eg: '2em'
- y: 10 // vertical axis - can be a number or a string indicating unity. eg: '2em'
- },
- }).showToast();
- ```
Toast will be pushed 50px from right in x axis and 10px from top in y axis.
Note:
If position is equals to left, it will be pushed from left.
If gravity is equals to bottom, it will be pushed from bottom.
API
| Option | type | Usage | Defaults |
|---|---|---|---|
| |-----------------|----------------------|----------------------------------------------------------------------------|-------------| | |||
| text | string | Message | "Hi |
| node | ELEMENT_NODE | Provide | | |
| duration | number | Duration | 3000 |
| selector | string | ELEMENT_NODE | ShadowRoot |
| destination | URL | URL | | |
| newWindow | boolean | Decides | false |
| close | boolean | To | false |
| gravity | "top" | To | "top" |
| position | "left" | To | "right" |
| backgroundColor | CSS | To | | |
| avatar | URL | Image/icon | | |
| className | string | Ability | | |
| stopOnFocus | boolean | To | true |
| callback | Function | Invoked | | |
| onClick | Function | Invoked | | |
| offset | Object | Ability | | |
| escapeMarkup | boolean | Toggle | true |
| style | object | Use | | |
| ariaLive | string | Announce | "polite" |
| oldestFirst | boolean | Set | true |
Deprecated properties: backgroundColor - use style.background option instead
Browsers support
![][ie]| ![][firefox] | ![][chrome] | ![][safari] | ![][opera] | |
|---|---|---|---|---|
| ---------------------- | ------------------------- | ----------------------- | ----------------------- | --------------------- |
| IE10, | last | last | last | last |
Contributors
License
MIT © Varun A P
[ie]: https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/edge.png
[firefox]: https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/firefox.png
[chrome]: https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/chrome.png
[safari]: https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/safari.png
[opera]: https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/opera.png
