Author: | aeolingamenfel |
---|---|
Views Total: | 98 views |
Official Page: | Go to website |
Last Update: | September 22, 2018 |
License: | MIT |
Preview:

Description:
ToastController.js is a dependency-free vanilla JavaScript library that lets you create Google Material Design-inspired toast notifications with custom messages and icons for your web applications.
Preview:
Load the stylesheet toast-controller.css and JavaScript file toast-controller.js in your document.
<link rel="stylesheet" href="toast-controller.css"> <script src="ToastController.js"></script>
Open a new Toast based on the configuration data passed in as a map.
- {string} config.name: the name of the Toast, to be used to reference it later
- {string} config.text: the text to display inside the Toast
- {string} config.icon: the icon to display on the left side of the toast
- {string} config.className: additional class that will be added to the Toast’s classes
- {ToastPriority} config.priority: the level of priority that the Toast has, out of two possible priorities: ToastPriority.HIGH or ToastPriority.LOW
ToastController.openToast({ text: "Hello World!" });
Close the toast message.
ToastController.toast.close();
Customize the toast message via SASS or LESS.
$toast_offset_left: 5px !default; $toast_offset_bottom: 5px !default; $toast_mobile_cutoff: 320px !default; $toast_font_size: 16px !default; $toast_font_size_mobile: $toast_font_size + 2px !default; $toast_mobile_style_change: true !default; // Colors $toast_success_color: #4CAF50 !default; $toast_error_color: #F44336 !default; $toast_warn_color: #FFC107 !default;
Changelog:
09/22/2018
- Fixed toast positioning on mobile