内容简介:Toast Maker is a simple and very lightweight javascript library for showing toast notification messages on web page. It provides multiple configurations to customize the toast styling(font, background, size ... anything), duration, position etc.
ToastMaker
Toast Maker is a simple and very lightweight javascript library for showing toast notification messages on web page. It provides multiple configurations to customize the toast styling(font, background, size ... anything), duration, position etc.
Demo
Features
- Responsive
- Customizable Styling
- Can be Used With Vanilla Javascript, NPM Project or ReactJS Project
- Works With - IE10, IE11, Edge, Chrome, Firefox, Safari, Opera
- No Dependencies
- 100% Code Coverage
Include toastmaker library in your project
Install toastmaker module in npm project
You can install toastmaker
module in your npm project using npm or yarn.
npm install --save toastmaker
or
yarn add toastmaker -S
After adding the toastmaker
module to your project, import it in your script as shown below.
import ToastMaker from 'toastmaker'; import "toastmaker/dist/toastmaker.css";
NOTE:The toastmaker.css
is the default css file. If you want you can refer to it and create your own css file and import it instead of this default one.
Include toastmaker library in a plain html
ToastMaker can also be used with plain vanilla javascript project. Just add the minified javascript and css file in you main html and you can start using it inside the javascript.
<link rel="stylesheet" type="text/css" href="https://unpkg.com/toastmaker/dist/toastmaker.min.css"> <script type="text/javascript" src="https://unpkg.com/toastmaker/dist/toastmaker.min.js"></script>
If you want you can download the bundle from the releases section , then include & reference the files locally rather than using the cdn links.
How to use?
Using ToastMaker
is very simple. Create a toast by passing the text message, as shown in below example
ToastMaker('Hi There!');
If you want to change the default timeout, position, styling etc you can pass the optional arguments. Refer below example.
ToastMaker('Hi There!', 2000, { styles: { fontSize: '18px', backgroundColor: 'green' }, classList: ['custom-class', 'other-custom-class'], align: 'right', valign: 'top' });
Use your own styles and css classes
You can specify multiple styles or your own css classes using styles
and classList
options respectively. This is useful in case you want to change the background, font-size, color, padding, border, ... and a lot of other styling as per your requirement.
ToastMaker("Hi There!", 2000, { styles: { fontSize: "15px" }, classList: ["custom-class"] });
For more examples, check out the live demo page - ToastMaker Demo
Options
Option | Type / Allowed Values | Description | Default | Mandatory? |
---|---|---|---|---|
text |
string | Text message to be shown in toast | N/A | Yes |
timeout |
number | Duration (In milliseconds) for which the toast should be displayed | 3000 |
No |
styles |
object | Object containing style properties to be applied to toast | N/A | No |
classList |
array | Array of css classes to be applied to toast | N/A | No |
align |
'left' 'center' 'right' |
Horizontal alignment for toast | 'center' |
No |
valign |
'top' 'bottom' |
Vertical alignment for toast | 'bottom' |
No |
Note:All options except text
and timeout
needs to be wrapped inside an object and passed to the ToastMaker
as the 3rd argument.
Refersection to know how these options should be used with the ToastMaker
function.
Bundle size
size | gzip | |
---|---|---|
toastmaker | ||
toastify-js | ||
toastr | ||
noty |
Versioning
For the versions available, see the tags on this repository .
License
This project is licensed under the MIT License - see the LICENSE.md file for details
以上所述就是小编给大家介绍的《ToastMaker - javascript library to create toast notifications on web page》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。