3
3
![ forthebadge] ( https://forthebadge.com/images/badges/made-with-javascript.svg )
4
4
![ forthebadge] ( https://forthebadge.com/images/badges/built-with-love.svg )
5
5
6
- [ ![ toastify-js] ( https://img.shields.io/badge/toastify--js-1.2.0 -brightgreen.svg )] ( https://www.npmjs.com/package/toastify-js )
6
+ [ ![ toastify-js] ( https://img.shields.io/badge/toastify--js-1.2.2 -brightgreen.svg )] ( https://www.npmjs.com/package/toastify-js )
7
7
8
8
Toastify is a lightweight, vanilla JS toast notification library.
9
9
@@ -13,32 +13,36 @@ Toastify is a lightweight, vanilla JS toast notification library.
13
13
14
14
## Features
15
15
16
- - Multiple stacked notifications
17
- - Customizable
18
- - No blocking of execution thread
16
+ * Multiple stacked notifications
17
+ * Customizable
18
+ * No blocking of execution thread
19
19
20
20
### Customization options
21
21
22
- - Notification Text
23
- - Duration
24
- - Toast background color
25
- - Close icon display
26
- - Display position
22
+ * Notification Text
23
+ * Duration
24
+ * Toast background color
25
+ * Close icon display
26
+ * Display position
27
27
28
28
## Installation
29
29
30
30
#### Toastify now supports installation via NPM
31
31
32
- - Run the below command to add toastify-js to your exisitng or new project.
32
+ * Run the below command to add toastify-js to your exisitng or new project.
33
+
33
34
```
34
35
npm install --save toastify-js
35
36
```
37
+
36
38
or
39
+
37
40
```
38
41
yarn add toastify-js -S
39
42
```
40
43
41
- - Import toastify-js into your module to start using it.
44
+ * Import toastify-js into your module to start using it.
45
+
42
46
```
43
47
import Toastify from 'toastify-js'
44
48
```
@@ -56,47 +60,65 @@ And the script at the bottom of the page
56
60
``` html
57
61
<script type =" text/javascript" src =" https://cdn.jsdelivr.net/npm/toastify-js" ></script >
58
62
```
63
+
59
64
> Files are delivered via the CDN service provided by [ jsdeliver] ( https://www.jsdelivr.com/ )
60
65
61
66
## Documentation
62
67
63
68
``` javascript
64
69
Toastify ({
65
- text: " This is a toast" ,
66
- duration: 3000 ,
67
- destination: ' https://github.com/apvarun/toastify-js' ,
68
- newWindow: true ,
69
- close: true ,
70
- gravity: " top" , // `top` or `bottom`
71
- positionLeft: true , // `true` or `false`
72
- backgroundColor: " linear-gradient(to right, #00b09b, #96c93d)"
70
+ text: " This is a toast" ,
71
+ duration: 3000 ,
72
+ destination: " https://github.com/apvarun/toastify-js" ,
73
+ newWindow: true ,
74
+ close: true ,
75
+ gravity: " top" , // `top` or `bottom`
76
+ positionLeft: true , // `true` or `false`
77
+ backgroundColor: " linear-gradient(to right, #00b09b, #96c93d)" ,
73
78
}).showToast ();
74
79
```
75
80
76
81
> Toast messages will be centered on devices with screen width less than 360px.
77
82
78
- + See the [ changelog] ( https://github.com/apvarun/toastify-js/blob/master/CHANGELOG.md )
83
+ * See the [ changelog] ( https://github.com/apvarun/toastify-js/blob/master/CHANGELOG.md )
79
84
80
85
### Add own custom classes
81
86
82
- If you want to use custom classes (like info or warning for example) you can do that via
87
+ If you want to use custom classes on the toast for customizing (like info or warning for example), you can do that as follows:
83
88
84
89
``` javascript
85
90
Toastify ({
86
- text: " This is a toast" ,
87
- backgroundColor: " linear-gradient(to right, #00b09b, #96c93d)" ,
88
- classes: " info"
91
+ text: " This is a toast" ,
92
+ backgroundColor: " linear-gradient(to right, #00b09b, #96c93d)" ,
93
+ classes: " info" ,
89
94
}).showToast ();
90
-
91
95
```
92
96
97
+ Multiple classes also can be assigned as a string, with spaces between class names.
93
98
94
99
## Browsers support
95
100
96
- | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/edge.png" alt="IE / Edge" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)<br />IE / Edge | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/firefox.png" alt="Firefox" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)<br />Firefox | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/chrome.png" alt="Chrome" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)<br />Chrome | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/safari.png" alt="Safari" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)<br />Safari | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/opera.png" alt="Opera" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)<br />Opera |
97
- | --------- | --------- | --------- | --------- | --------- |
98
- | IE10, IE11, Edge| last 10 versions| last 10 versions| last 10 versions| last 10 versions
101
+ | ![ ] [ ie ] <br />IE / Edge | ![ ] [ firefox ] <br />Firefox | ![ ] [ chrome ] <br />Chrome | ![ ] [ safari ] <br />Safari | ![ ] [ opera ] <br />Opera |
102
+ | ---------------------- | ------------------------- | ----------------------- | ----------------------- | --------------------- |
103
+ | IE10, IE11, Edge | last 10 versions | last 10 versions | last 10 versions | last 10 versions |
104
+
105
+ ## Contributors
106
+
107
+ <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
108
+
109
+ <!-- prettier-ignore -->
110
+ | [ ![ rndevfx] ( https://avatars2.githubusercontent.com/u/5052076?v=3&s=80 )] ( https://github.com/rndevfx ) | [ ![ Wachiwi] ( https://avatars1.githubusercontent.com/u/4199845?v=3&s=80 )] ( https://github.com/Wachiwi ) |
111
+ | :--:| :--: |
112
+ | [ rndevfx] ( https://github.com/rndevfx ) | [ Wachiwi] ( https://github.com/Wachiwi ) |
113
+
114
+ <!-- ALL-CONTRIBUTORS-LIST:END -->
99
115
100
116
## License
101
117
102
118
MIT © [ Varun A P] ( https://github.com/apvarun )
119
+
120
+ [ ie ] : https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/edge.png
121
+ [ firefox ] : https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/firefox.png
122
+ [ chrome ] : https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/chrome.png
123
+ [ safari ] : https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/safari.png
124
+ [ opera ] : https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/opera.png
0 commit comments