Skip to content

Commit 32c1329

Browse files
committed
📝 Updated README
1 parent 7dc20a3 commit 32c1329

File tree

1 file changed

+30
-21
lines changed

1 file changed

+30
-21
lines changed

README.md

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ yarn add @mathieustan/vue-notification
3131
import VueNotification from '@mathieustan/vue-notification';
3232
Vue.use(VueNotification);
3333

34-
// breakpoint example
34+
// Or with options (like breakpoints)
3535
Vue.use(VueNotification, {
3636
breakpoints: {
3737
0: {
@@ -105,15 +105,15 @@ Theme object looks like this :point_down:
105105
}
106106
```
107107

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
110111

111112
```javascript
112113
import VueNotification from '@mathieustan/vue-notification';
113-
Vue.use(VueNotification);
114-
115114
Vue.use(VueNotification, {
116115
theme: {
116+
// darken colors are used for background on icon
117117
colors: {
118118
success: '#54d861',
119119
darkenSuccess: '#2d8e36',
@@ -134,22 +134,31 @@ Vue.use(VueNotification, {
134134
2. Theme properties when calling $notify
135135

136136
```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+
});
151160
},
152-
boxShadow: '10px 5px 5px red',
153161
},
154-
});
162+
//...
163+
};
155164
```

0 commit comments

Comments
 (0)