Author: | apvarun |
---|---|
Views Total: | 1,879 |
Official Page: | Go to website |
Last Update: | December 7, 2018 |
License: | MIT |
Preview:

Description:
Toastify is a simple, lightweight, vanilla JavaScript library used for sending stackable, non-blocking toast messages to end users.
How to use it:
Import the main JavaScript file ‘toastify.js’ into the html document.
<script src="src/toastify.js"></script>
Create a basic toast message and specify the duration in milliseconds to hide the notification.
var myToast = Toastify({ text: "This is a toast message", duration: 5000 })
Show the toast message. In this example, the toast message will auto dismiss after 5 seconds.
myToast.showToast();
The default CSS for the toast message. Copy and paste the CSS styles as displayed below into your web page.
.toastify { padding: 12px 20px; color: #ffffff; display: inline-block; box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3); background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5); background: linear-gradient(135deg, #73a5ff, #5477f5); position: fixed; top: -150px; right: 15px; opacity: 0; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); border-radius: 2px; cursor: pointer; } .toastify.on { opacity: 1; }
Specify the container in which you want to display the toast message.
myToast = Toastify({ text: "This is a toast message", duration: 5000, selector: '#container' })
Execute a callback function as you click on the toast message.
myToast = Toastify({ text: "This is a toast message", duration: 5000, callback: function(){} })
More configuration options.
myToast = Toastify({ // On-click destination destination: null, // Open destination in new window newWindow: false, // Show toast close icon close: false, // Toast position - top or bottom gravity: bottom, // Toast position - left or right positionLeft: false, // Background color backgroundColor: "linear-gradient(135deg, #73a5ff, #5477f5)", // Avatar avatar: "", // Additional classes for the toast classes: "" })
Changelog:
v1.3.2 (12/07/2018)
- Added z-index attribute.
v1.3.1 (10/09/2018)
- prevents to use !important when overwriting .toastify background color with custom CSS
- Update classnames inside media query
v1.2.1 (05/31/2018)
- Added support for Classes. Now custom classes can be added to the toast while creating it.
v1.2.0 (05/25/2018)
- Fix issue when
destination
andclose
options is used at the same time - Add support for custom classes