@@ -31,7 +31,7 @@ yarn add @mathieustan/vue-notification
31
31
import VueNotification from ' @mathieustan/vue-notification' ;
32
32
Vue .use (VueNotification);
33
33
34
- // breakpoint example
34
+ // Or with options (like breakpoints)
35
35
Vue .use (VueNotification, {
36
36
breakpoints: {
37
37
0 : {
@@ -105,15 +105,15 @@ Theme object looks like this :point_down:
105
105
}
106
106
```
107
107
108
- There are two way to update theme.
109
- 1\. Options when init VueNotification
108
+ ** Examples : There are two ways to update theme.**
109
+
110
+ 1 . Options when init VueNotification
110
111
111
112
``` javascript
112
113
import VueNotification from ' @mathieustan/vue-notification' ;
113
- Vue .use (VueNotification);
114
-
115
114
Vue .use (VueNotification, {
116
115
theme: {
116
+ // darken colors are used for background on icon
117
117
colors: {
118
118
success: ' #54d861' ,
119
119
darkenSuccess: ' #2d8e36' ,
@@ -134,22 +134,31 @@ Vue.use(VueNotification, {
134
134
2 . Theme properties when calling $notify
135
135
136
136
``` javascript
137
- this .$notify ({
138
- message: ' Hello Wolrd' ,
139
- theme: {
140
- colors: {
141
- success: ' #54d861' ,
142
- darkenSuccess: ' #2d8e36' ,
143
- info: ' #5d6a89' ,
144
- darkenInfo: ' #535f7b' ,
145
- warning: ' #f8a623' ,
146
- darkenWarning: ' #f69a07' ,
147
- error: ' #ff4577' ,
148
- darkenError: ' #ff245f' ,
149
- offline: ' #ff4577' ,
150
- darkenOffline: ' #ff245f' ,
137
+ < script>
138
+ export default {
139
+ // ...
140
+ methods: {
141
+ showNotification () {
142
+ this .$notify ({
143
+ message: ' Hello Wolrd' ,
144
+ theme: {
145
+ colors: {
146
+ success: ' #54d861' ,
147
+ darkenSuccess: ' #2d8e36' ,
148
+ info: ' #5d6a89' ,
149
+ darkenInfo: ' #535f7b' ,
150
+ warning: ' #f8a623' ,
151
+ darkenWarning: ' #f69a07' ,
152
+ error: ' #ff4577' ,
153
+ darkenError: ' #ff245f' ,
154
+ offline: ' #ff4577' ,
155
+ darkenOffline: ' #ff245f' ,
156
+ },
157
+ boxShadow: ' 10px 5px 5px red' ,
158
+ },
159
+ });
151
160
},
152
- boxShadow: ' 10px 5px 5px red' ,
153
161
},
154
- });
162
+ // ...
163
+ };
155
164
```
0 commit comments