vue-nt-toast 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +92 -19
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,35 +1,108 @@
|
|
|
1
|
-
|
|
1
|
+
vue-nt-toast
|
|
2
|
+
================
|
|
3
|
+
`vue-nt-toast` is a JavaScript notification system library. It is made available through the installation of the plugin in the Vue project.
|
|
2
4
|
|
|
3
|
-
|
|
5
|
+
It is designed to operate outside the application (the top layer) so as not to affect the application's layer system as much as possible, and provides status indications of "success", "risk", "information", "attention", and "important" depending on the type of content.
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
You can set multiple options across the system, including theme, location, and snack bar mode, to reflect them in the entire system, and you can also apply options that can be changed every time the user runs it.
|
|
6
8
|
|
|
7
|
-
|
|
9
|
+
`vue-nt-toast`는 자바스크립트 알림 시스템 라이브러리 입니다. Vue 프로젝트 내 plugin 설치를 통해서 사용 가능하도록 제작 되었습니다.
|
|
10
|
+
어플리케이션 외부(최상단 레이어)에서 동작하여 내부 레이어 시스템에 영향을 받지 않게 설계 되었으며 컨텐츠의 종류에 따라 “성공”, “위험”, “정보”, “주의”, “중요” 의 상태 표시를 제공하고있습니다.
|
|
8
11
|
|
|
9
|
-
|
|
12
|
+
테마, 위치, 스낵바 모드 등 여러 옵션을 전역에서 설정 하여 전체 시스템에 반영 하도록 할수있고, 사용자가 실행 할때 마다 변경 가능한 옵션을 적용 할수도 있습니다.
|
|
10
13
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
## Project Setup
|
|
14
|
+
---
|
|
15
|
+
## Installation
|
|
14
16
|
|
|
15
17
|
```sh
|
|
16
|
-
npm install
|
|
18
|
+
$ npm install vue-nt-toast —-save
|
|
17
19
|
```
|
|
20
|
+
---
|
|
21
|
+
## Plugin registration
|
|
18
22
|
|
|
19
|
-
|
|
23
|
+
```javascript
|
|
24
|
+
Import { createApp } from “vue”;
|
|
25
|
+
// import module
|
|
26
|
+
import NtToast from “vue-nt-toast”;
|
|
27
|
+
# import style css or use yours
|
|
28
|
+
import “vue-nt-toast/toasr.css”;
|
|
29
|
+
|
|
30
|
+
const app = createApp(App)
|
|
20
31
|
|
|
21
|
-
|
|
22
|
-
|
|
32
|
+
Const defaultOptions = {
|
|
33
|
+
// You can set your initial options here
|
|
34
|
+
};
|
|
35
|
+
app.use(NtToast, defaultOptions)
|
|
23
36
|
```
|
|
37
|
+
---
|
|
24
38
|
|
|
25
|
-
|
|
39
|
+
## Usage
|
|
26
40
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
41
|
+
* show(type, contents, options)
|
|
42
|
+
* contents.title (Toast title)
|
|
43
|
+
* contents.description (Toast description)
|
|
30
44
|
|
|
31
|
-
###
|
|
45
|
+
### Set for use global function
|
|
32
46
|
|
|
33
|
-
```
|
|
34
|
-
|
|
47
|
+
```javascript
|
|
48
|
+
// get Proxy in current instance
|
|
49
|
+
import { getCurrentInctance } from 'vue';
|
|
50
|
+
|
|
51
|
+
// composition api or setup
|
|
52
|
+
const { proxy } = getCurrentInstance();
|
|
35
53
|
```
|
|
54
|
+
### Creating toast (Show toast)
|
|
55
|
+
```javascript
|
|
56
|
+
// show success toast
|
|
57
|
+
proxy.$ntToast.show('success', ..., ...)
|
|
58
|
+
|
|
59
|
+
// show another type
|
|
60
|
+
proxy.$ntToast.show('info', ..., ...)
|
|
61
|
+
proxy.$ntToast.show('danger', ..., ...)
|
|
62
|
+
```
|
|
63
|
+
---
|
|
64
|
+
|
|
65
|
+
## Parameters
|
|
66
|
+
|
|
67
|
+
| Name | Description | Required |
|
|
68
|
+
| --- | --- | --- |
|
|
69
|
+
| `type` | Status or Colors | `true` |
|
|
70
|
+
| `contnts.type` | Title Text | |
|
|
71
|
+
| `contents.description` | Description Text | `true` |
|
|
72
|
+
| `options` | User Custom Options | |
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
## Properties
|
|
76
|
+
|
|
77
|
+
* **useTitle**: _boolean_ ▶︎ `true`
|
|
78
|
+
Setting for show/hide toast title.
|
|
79
|
+
|
|
80
|
+
* **useIcon**: _boolean_ ▶︎ `true`
|
|
81
|
+
Setting for show/hide toast status icon.
|
|
82
|
+
|
|
83
|
+
* **round**: _boolean_ ▶︎ `false`
|
|
84
|
+
Setting for enable/disable round border.
|
|
85
|
+
|
|
86
|
+
* **closeButton**: _boolean_ ▶︎ `true`
|
|
87
|
+
Setting for show/hide close button.
|
|
88
|
+
|
|
89
|
+
* **displayOnTop**: _boolean_ ▶︎ `false`
|
|
90
|
+
Setting for order type when toast create.
|
|
91
|
+
|
|
92
|
+
* **snackbar**: _boolean_ ▶︎ `false`
|
|
93
|
+
Setting for snackbar mode.
|
|
94
|
+
|
|
95
|
+
* **freeze**: _boolean_ ▶︎ `false`
|
|
96
|
+
Setting for auto close off.
|
|
97
|
+
|
|
98
|
+
* **timeout**: _number_ ▶︎ `5000`
|
|
99
|
+
Setting for delay time.
|
|
100
|
+
|
|
101
|
+
* **theme**: _string_ ▶︎ `''`
|
|
102
|
+
Setting for toast style.
|
|
103
|
+
`light` `icon` `icon-bg` `line`
|
|
104
|
+
|
|
105
|
+
* **position**: _string_ ▶︎ `top-right`
|
|
106
|
+
Setting for create position.
|
|
107
|
+
v-align(`top`, `bottom`) and h-align(`left`, `center`, `right`) and `full-width`
|
|
108
|
+
---
|