1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
VYN
===================
**Vanilla-Yo-Notification(VYN)** is a light-weight **ES6** compatible **javascript** growl like notification library (JQuery Free).
----------
Installation
-------------
>You have the following options to get **VYN**
> - Clone the repo to get all source files including build scripts:
>``` git clone https://bitbucket.org/indrajithkl/vanilla-yo-notification```
> - Download directly from bitbucket
> ``` https://bitbucket.org/indrajithkl/vanilla-yo-notification/downloads/```
what ever you can find the compiled file in the dist folder. Since VYN is ES6 compatible you can import it into any js files and can be included in the html script tag.
Usage
--------
You can initialize VYN via Javascript using
```
// javascript
var vyn = new VYN();
```
There is an optional parameter for the constructor for positioning the notification.
example :
```
var vyn = new VYN({
position: ['top','right']
});
```
default values for position is **['bottom', 'right']**
So to show a notification using VYN you can now use the instance of VYN.
like
```
vyn.show({
title: 'Notification Title',
content: 'Hi this is a message',
});
```
VYN supports three types of notifications **success**, **warning** & **error**. Each has similar function signature and expects a configuration object as parameter.
### Config
Config is a javascript literal should be of the following format.
``` json
{
title: string,
content: string,
footer: string(optional),
type: string,
position: string array,
timeout: number in millisecond
}
```
### title : string
title field is a string property, which is supposed to be the title of the notification.
### content: string
content is the message which should be the main content of the notification. You can also specify html as a content but should be in string format.
### footer: string
footer filed is the content which comes below the bottom of the notification. This is an optional field.
### type: string
type filed expects the following string as its value **'success', 'warning' & 'error'**. Default value is '**success'**.
### position: Array
position filed expects an array of two values. This determines where the notification should be shown. The possible values are **'top', 'bottom', 'left', 'right'**
### timeout: number
number filed is the one which determines how much time notification should be visible. It expects time in **milliseconds**. Default value is *6000ms(6s)*
#### [example](http://libvyn.indrajith.surge.sh/example/example.html)
### Support ME
[](https://ko-fi.com/R6R36EBQ)
|
