Skip to content

Commit 055bf64

Browse files
sansilsansil
committed
update readme
1 parent fa79a6a commit 055bf64

File tree

1 file changed

+110
-4
lines changed

1 file changed

+110
-4
lines changed

‎README.md

Lines changed: 110 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<!-- [![](https://img.shields.io/npm/v/vt-notifications.svg?logo=npm&style=flat-square)](https://www.npmjs.com/package/vt-notifications) -->
2-
<!-- [![](https://img.shields.io/npm/dt/vt-notifications.svg?style=flat-square)](https://www.npmjs.com/package/vt-notifications) -->
32

43
[![](https://img.shields.io/github/license/sansil/vt-notifications?style=flat-square)](https://github.com/sansil/vt-notifications)
54

5+
[![](https://img.shields.io/npm/dt/vt-notifications.svg?style=flat-square)](https://www.npmjs.com/package/vt-notifications)
6+
67
# vt-notifications
78

89
A headless vue notification library to use with tailwind
@@ -31,11 +32,23 @@ You can then register Notifications as a Vue plugin.
3132
import Vue from "vue";
3233
import Notifications from "vt-notifications";
3334

34-
// This exposes `this.$breadstick` in your Vue template.
3535
Vue.use(Notifications);
3636
```
3737

38-
## 🍞Basic usage
38+
## 🍞How to use
39+
40+
```vue
41+
<notificationGroup group="foo">
42+
// Here put your notifications wrapper box
43+
...
44+
<notification v-slot="{notifications}">
45+
// Here put your notification layout
46+
...
47+
</notification>
48+
</notificationGroup>
49+
```
50+
51+
### Basic example
3952

4053
For example in your App.vue
4154

@@ -76,11 +89,104 @@ For example in your App.vue
7689
</notificationGroup>
7790
```
7891

79-
In any of your vue files:
92+
Then in any of your vue files:
8093

8194
```javascript
8295
this.$notify(
8396
{ group: "foo", title: "Success", text: "Your account was registered!" },
8497
2000
8598
); // 2s
8699
```
100+
101+
The first argument is an object containing the data for the `notification` layout, it important to specify the group where the notificatoins are going to be displayed, the second argument is the timeout. The default timeout is 3 seconds.
102+
103+
### Example with differents groups
104+
105+
You can use `notificationGroup` component to have different types of notifcations. For example, notifcations error messages in top center and generic app notifications in bottom-right corner
106+
107+
```vue
108+
<notificationGroup group="error">
109+
<div
110+
class="fixed inset-0 flex px-4 py-6 pointer-events-none p-6 items-start justify-end"
111+
>
112+
<div class="max-w-sm w-full">
113+
<notification v-slot="{notifications}">
114+
<div
115+
class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden mt-4"
116+
v-for="notification in notifications"
117+
:key="notification.id"
118+
>
119+
<div class="flex justify-center items-center w-12 bg-red-500">
120+
<svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
121+
<path d="M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z"/>
122+
</svg>
123+
</div>
124+
125+
<div class="-mx-3 py-2 px-4">
126+
<div class="mx-3">
127+
<span class="text-red-500 font-semibold">{{notification.title}}</span>
128+
<p class="text-gray-600 text-sm">{{notification.text}}</p>
129+
</div>
130+
</div>
131+
</div>
132+
</notification>
133+
</div>
134+
</div>
135+
</notificationGroup>
136+
137+
<notificationGroup group="generic">
138+
<div
139+
class="fixed inset-0 flex px-4 py-6 pointer-events-none p-6 items-start justify-end"
140+
>
141+
<div class="max-w-sm w-full">
142+
<notification v-slot="{notifications}">
143+
<div
144+
class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden mt-4"
145+
v-for="notification in notifications"
146+
:key="notification.id"
147+
>
148+
<div class="flex justify-center items-center w-12 bg-blue-500">
149+
<svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
150+
<path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/>
151+
</svg>
152+
</div>
153+
<div class="-mx-3 py-2 px-4">
154+
<div class="mx-3">
155+
<span class="text-blue-500 font-semibold">{{notification.title}}Info</span>
156+
<p class="text-gray-600 text-sm">{{notification.text}}</p>
157+
</div>
158+
</div>
159+
</div>
160+
</notification>
161+
</div>
162+
</div>
163+
</notificationGroup>
164+
```
165+
166+
Then in any of your vue files:
167+
168+
```javascript
169+
// error notifcation
170+
this.$notify(
171+
{ group: "error", title: "Error", text: "Your email is already used!" },
172+
4000
173+
);
174+
// generic notification
175+
this.$notify(
176+
{
177+
group: "generic",
178+
title: "Info",
179+
text: "This channel archived by the owner",
180+
},
181+
4000
182+
);
183+
```
184+
185+
## Props
186+
187+
Props por All props are optional.
188+
189+
| Name | Type | Default | Description |
190+
| ---------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
191+
| maxNotifications | Number | 10 | Maximum notifications displayed simultaneously |
192+
| transitionGroupClasses | Object | {enterActiveClassDelayed:"transform ease-out duration-300 transition delay-300",enterActiveClass:"transform ease-out duration-300 transition",enterClass:"translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-4",enterToClass:"translate-y-0 opacity-100 sm:translate-x-0",leaveActiveClass:"transition ease-in duration-500",leaveClass:"opacity-100",leaveToClass: "opacity-0", moveClass: "transition duration-500 "} | Classes for the transition-group component |

0 commit comments

Comments
 (0)