Toasty for Web
Toasty implementation for webs.
Idea was taken from GrenderG Toasty repository.
Npm installation
npm install toasty-web
And then require it:
const ToastyWeb = ;
Manual installation
- Copy 'style.css' located inside 'dist/styles' into your project and link it with
<link>
2. - Copy the JavaScript file 'dist/scripts/ToastyWeb.umd.js' into your project and include it in your header with
<script>
. If you are using ES modules you can use the 'dist/scripts/ToastyWeb.esm.js' instead. - Enjoy using Toasts!
Usage
To display an error Toast:
ToastyWeb;
To display a success Toast:
ToastyWeb;
To display an information Toast:
ToastyWeb;
To display a warning Toast:
ToastyWeb;
All methods above supports a second param to show or not the default icon. Default is true.
ToastyWeb;
To display a normal Toast:
ToastyWeb
To display a normal Toast with icon1:
ToastyWeb;
To display a totally custom Toast:
ToastyWeb;
Also, show method has two callbacks:
ToastyWeb;
If you want ommit one of them just set it to function() { return true; }
.
(1) Note: all icons must come from material icons.
(2) Note: if you are using bootstrap is probably that .show class has an !important so you need to uncomment this.
Configuration
You can set a custom class for Toast:
ToastyWebcustomClassName = "myCustomClass";
And custom timeOut for Toast dissapear (ms) default: 2000ms:
ToastyWebcustomTimeOut = 5000;
Screenshots
Build
The project is made with Typescript and SCSS so if you want to make changes you need to build it with
npm run build
and generated files will be in dist/
folder