virtual-ui-lib 1.0.4 → 1.0.5
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 +165 -24
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,15 +1,30 @@
|
|
|
1
1
|
# Virtual UI
|
|
2
2
|
|
|
3
|
-
Simple React UI Component Library.
|
|
3
|
+
Simple **React UI Component Library** with customizable components.
|
|
4
|
+
|
|
5
|
+
---
|
|
4
6
|
|
|
5
7
|
## Install
|
|
6
8
|
|
|
9
|
+
```bash
|
|
7
10
|
npm install virtual-ui-lib
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
---
|
|
8
14
|
|
|
9
15
|
## Usage
|
|
10
16
|
|
|
11
17
|
```jsx
|
|
12
|
-
import {
|
|
18
|
+
import {
|
|
19
|
+
Button,
|
|
20
|
+
Card,
|
|
21
|
+
Input,
|
|
22
|
+
Badge,
|
|
23
|
+
Alert,
|
|
24
|
+
Avatar,
|
|
25
|
+
Spinner,
|
|
26
|
+
Modal
|
|
27
|
+
} from "virtual-ui-lib"
|
|
13
28
|
|
|
14
29
|
function App() {
|
|
15
30
|
return (
|
|
@@ -21,6 +36,14 @@ function App() {
|
|
|
21
36
|
</Card>
|
|
22
37
|
|
|
23
38
|
<Input placeholder="Enter name" />
|
|
39
|
+
|
|
40
|
+
<Badge text="New" />
|
|
41
|
+
|
|
42
|
+
<Alert text="Saved successfully" />
|
|
43
|
+
|
|
44
|
+
<Avatar />
|
|
45
|
+
|
|
46
|
+
<Spinner />
|
|
24
47
|
</>
|
|
25
48
|
)
|
|
26
49
|
}
|
|
@@ -28,52 +51,170 @@ function App() {
|
|
|
28
51
|
|
|
29
52
|
---
|
|
30
53
|
|
|
31
|
-
|
|
54
|
+
# Components
|
|
32
55
|
|
|
33
|
-
|
|
56
|
+
Virtual UI currently includes the following components:
|
|
57
|
+
|
|
58
|
+
* Button
|
|
59
|
+
* Card
|
|
60
|
+
* Input
|
|
61
|
+
* Badge
|
|
62
|
+
* Alert
|
|
63
|
+
* Avatar
|
|
64
|
+
* Spinner
|
|
65
|
+
* Modal
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
# Button
|
|
34
70
|
|
|
35
71
|
```jsx
|
|
36
72
|
<Button text="Click me" />
|
|
37
73
|
```
|
|
38
74
|
|
|
39
|
-
Props
|
|
75
|
+
### Props
|
|
76
|
+
|
|
77
|
+
| Prop | Description |
|
|
78
|
+
| -------- | ---------------- |
|
|
79
|
+
| text | Button text |
|
|
80
|
+
| bg | Background color |
|
|
81
|
+
| color | Text color |
|
|
82
|
+
| size | sm / md / lg |
|
|
83
|
+
| width | Button width |
|
|
84
|
+
| radius | Border radius |
|
|
85
|
+
| shadow | Box shadow |
|
|
86
|
+
| disabled | Disable button |
|
|
87
|
+
| icon | Add icon |
|
|
88
|
+
|
|
89
|
+
---
|
|
90
|
+
|
|
91
|
+
# Card
|
|
92
|
+
|
|
93
|
+
```jsx
|
|
94
|
+
<Card title="Card Title" text="Card description" />
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### Props
|
|
98
|
+
|
|
99
|
+
| Prop | Description |
|
|
100
|
+
| -------- | ------------------------- |
|
|
101
|
+
| title | Card title |
|
|
102
|
+
| text | Card description |
|
|
103
|
+
| width | Card width |
|
|
104
|
+
| radius | Border radius |
|
|
105
|
+
| shadow | Box shadow |
|
|
106
|
+
| children | Extra content inside card |
|
|
107
|
+
|
|
108
|
+
---
|
|
109
|
+
|
|
110
|
+
# Input
|
|
111
|
+
|
|
112
|
+
```jsx
|
|
113
|
+
<Input placeholder="Enter name" />
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
### Props
|
|
117
|
+
|
|
118
|
+
| Prop | Description |
|
|
119
|
+
| ----------- | -------------------- |
|
|
120
|
+
| placeholder | Input placeholder |
|
|
121
|
+
| width | Input width |
|
|
122
|
+
| radius | Border radius |
|
|
123
|
+
| shadow | Box shadow |
|
|
124
|
+
| value | Input value |
|
|
125
|
+
| onChange | Input change handler |
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
|
|
129
|
+
# Badge
|
|
130
|
+
|
|
131
|
+
```jsx
|
|
132
|
+
<Badge text="New" />
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
### Props
|
|
40
136
|
|
|
41
137
|
| Prop | Description |
|
|
42
138
|
| ----- | ---------------- |
|
|
43
|
-
| text |
|
|
139
|
+
| text | Badge text |
|
|
44
140
|
| bg | Background color |
|
|
45
141
|
| color | Text color |
|
|
46
|
-
| size | sm / md / lg |
|
|
47
142
|
|
|
48
143
|
---
|
|
49
144
|
|
|
50
|
-
|
|
145
|
+
# Alert
|
|
51
146
|
|
|
52
147
|
```jsx
|
|
53
|
-
<
|
|
148
|
+
<Alert text="Saved successfully" />
|
|
54
149
|
```
|
|
55
150
|
|
|
56
|
-
Props
|
|
151
|
+
### Props
|
|
57
152
|
|
|
58
|
-
| Prop
|
|
59
|
-
|
|
|
60
|
-
|
|
|
61
|
-
|
|
|
62
|
-
|
|
|
63
|
-
| shadow | Card shadow |
|
|
153
|
+
| Prop | Description |
|
|
154
|
+
| ----- | ---------------- |
|
|
155
|
+
| text | Alert message |
|
|
156
|
+
| bg | Background color |
|
|
157
|
+
| color | Text color |
|
|
64
158
|
|
|
65
159
|
---
|
|
66
160
|
|
|
67
|
-
|
|
161
|
+
# Avatar
|
|
68
162
|
|
|
69
163
|
```jsx
|
|
70
|
-
<
|
|
164
|
+
<Avatar />
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
### Props
|
|
168
|
+
|
|
169
|
+
| Prop | Description |
|
|
170
|
+
| ------ | ------------- |
|
|
171
|
+
| src | Avatar image |
|
|
172
|
+
| size | Avatar size |
|
|
173
|
+
| radius | Border radius |
|
|
174
|
+
|
|
175
|
+
---
|
|
176
|
+
|
|
177
|
+
# Spinner
|
|
178
|
+
|
|
179
|
+
```jsx
|
|
180
|
+
<Spinner />
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
### Props
|
|
184
|
+
|
|
185
|
+
| Prop | Description |
|
|
186
|
+
| ------ | ------------- |
|
|
187
|
+
| size | Spinner size |
|
|
188
|
+
| color | Spinner color |
|
|
189
|
+
| border | Border width |
|
|
190
|
+
|
|
191
|
+
---
|
|
192
|
+
|
|
193
|
+
# Modal
|
|
194
|
+
|
|
195
|
+
```jsx
|
|
196
|
+
<Modal open={true} title="Example Modal">
|
|
197
|
+
Hello Modal
|
|
198
|
+
</Modal>
|
|
71
199
|
```
|
|
72
200
|
|
|
73
|
-
Props
|
|
201
|
+
### Props
|
|
202
|
+
|
|
203
|
+
| Prop | Description |
|
|
204
|
+
| -------- | ----------------- |
|
|
205
|
+
| open | Show / hide modal |
|
|
206
|
+
| title | Modal title |
|
|
207
|
+
| onClose | Close modal |
|
|
208
|
+
| children | Modal content |
|
|
209
|
+
|
|
210
|
+
---
|
|
211
|
+
|
|
212
|
+
# Contributing
|
|
213
|
+
|
|
214
|
+
Feel free to contribute by creating issues or pull requests.
|
|
215
|
+
|
|
216
|
+
---
|
|
217
|
+
|
|
218
|
+
# License
|
|
74
219
|
|
|
75
|
-
|
|
76
|
-
| ----------- | ----------------- |
|
|
77
|
-
| placeholder | Input placeholder |
|
|
78
|
-
| width | Input width |
|
|
79
|
-
| radius | Border radius |
|
|
220
|
+
MIT
|