kaplay-ui 0.18.2 → 0.18.4
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 +96 -3
- package/inputs/index.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -26,9 +26,44 @@ npm install kaplay-ui
|
|
|
26
26
|
|
|
27
27
|
### Inputs
|
|
28
28
|
|
|
29
|
+
All inputs are imported from the <code>/inputs</code> folder.
|
|
30
|
+
|
|
31
|
+
```javascript
|
|
32
|
+
import {} from "kaplay-ui/inputs";
|
|
33
|
+
```
|
|
34
|
+
|
|
29
35
|
#### Checkbox
|
|
30
36
|
|
|
31
|
-
|
|
37
|
+
To make a checkbox, one must use the exported <code>makeCheckbox()</code> function.
|
|
38
|
+
|
|
39
|
+
##### Example
|
|
40
|
+
|
|
41
|
+
An example usage of a checkbox.
|
|
42
|
+
|
|
43
|
+
```javascript
|
|
44
|
+
import kaplay from "kaplay";
|
|
45
|
+
import "kaplay/global";
|
|
46
|
+
|
|
47
|
+
import { makeCheckbox } from "kaplay-ui/inputs";
|
|
48
|
+
|
|
49
|
+
kaplay();
|
|
50
|
+
|
|
51
|
+
const checkBox = makeCheckbox();
|
|
52
|
+
|
|
53
|
+
add(checkBox);
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
##### State
|
|
57
|
+
|
|
58
|
+
A cehckbox has the following state:
|
|
59
|
+
|
|
60
|
+
| state | Type | Default | State change by |
|
|
61
|
+
| --------- | -------- | ------- | ------------------- |
|
|
62
|
+
| `checked` | `boolean` | false | Click on checkbox |
|
|
63
|
+
|
|
64
|
+
##### Parameters
|
|
65
|
+
|
|
66
|
+
A checkbox can take the following parameters:
|
|
32
67
|
|
|
33
68
|
| Parameter | Type | Default | Required | Description |
|
|
34
69
|
| --------- | -------- | ------- | -------- | ------------------- |
|
|
@@ -37,9 +72,32 @@ Makes a checkbow that takes the following parameters:
|
|
|
37
72
|
| `width` | `number` | 25 | ❌ No | Checkbox width |
|
|
38
73
|
| `height` | `number` | 25 | ❌ No | Checkbox height |
|
|
39
74
|
|
|
75
|
+
<br>
|
|
76
|
+
|
|
40
77
|
#### Text Button
|
|
41
78
|
|
|
42
|
-
|
|
79
|
+
To make a text button, one must use the exported <code>makeTextButton()</code> function.
|
|
80
|
+
|
|
81
|
+
##### Example
|
|
82
|
+
|
|
83
|
+
An example usage of a text button.
|
|
84
|
+
|
|
85
|
+
```javascript
|
|
86
|
+
import kaplay from "kaplay";
|
|
87
|
+
import "kaplay/global";
|
|
88
|
+
|
|
89
|
+
import { makeTextButton } from "kaplay-ui/inputs";
|
|
90
|
+
|
|
91
|
+
kaplay();
|
|
92
|
+
|
|
93
|
+
const txtBtn = makeTextButton("Start");
|
|
94
|
+
|
|
95
|
+
add(txtBtn);
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
##### Parameters
|
|
99
|
+
|
|
100
|
+
A text button can take the following parameters:
|
|
43
101
|
|
|
44
102
|
| Parameter | Type | Default | Required | Description |
|
|
45
103
|
| ------------ | -------- | ------- | -------- | ---------------------------------- |
|
|
@@ -52,9 +110,40 @@ Makes a button with centered text that takes the following parameters:
|
|
|
52
110
|
| `btnOutline` | `number` | 1 | ❌ No | Button outline |
|
|
53
111
|
| `txtSize` | `number` | 15 | ❌ No | Text size |
|
|
54
112
|
|
|
113
|
+
<br>
|
|
114
|
+
|
|
55
115
|
#### Toggle
|
|
56
116
|
|
|
57
|
-
|
|
117
|
+
To make a toggle, one must use the exported <code>makeToggle()</code> function.
|
|
118
|
+
|
|
119
|
+
##### Example
|
|
120
|
+
|
|
121
|
+
An example usage of a toggle.
|
|
122
|
+
|
|
123
|
+
```javascript
|
|
124
|
+
import kaplay from "kaplay";
|
|
125
|
+
import "kaplay/global";
|
|
126
|
+
|
|
127
|
+
import { makeToggle } from "kaplay-ui/inputs";
|
|
128
|
+
|
|
129
|
+
kaplay();
|
|
130
|
+
|
|
131
|
+
const toggle = makeToggle();
|
|
132
|
+
|
|
133
|
+
add(toggle);
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
##### State
|
|
137
|
+
|
|
138
|
+
A cehckbox has the following state:
|
|
139
|
+
|
|
140
|
+
| state | Type | Default | State change by |
|
|
141
|
+
| --------- | -------- | ------- | ------------------- |
|
|
142
|
+
| `toggled` | `boolean` | false | Click on toggle |
|
|
143
|
+
|
|
144
|
+
##### Parameters
|
|
145
|
+
|
|
146
|
+
A toggle can take the following parameters:
|
|
58
147
|
|
|
59
148
|
| Parameter | Type | Default | Required | Description |
|
|
60
149
|
| --------- | -------- | ------- | -------- | ----------------- |
|
|
@@ -63,10 +152,14 @@ Makes a toggle that takes the following parameters:
|
|
|
63
152
|
| `width` | `number` | 50 | ❌ No | Toggle width |
|
|
64
153
|
| `height` | `number` | 25 | ❌ No | Toggle height |
|
|
65
154
|
|
|
155
|
+
<br>
|
|
156
|
+
|
|
66
157
|
## License
|
|
67
158
|
|
|
68
159
|
This project is licensed under the MIT License - see the LICENSE file for details.
|
|
69
160
|
|
|
161
|
+
<br>
|
|
162
|
+
|
|
70
163
|
## Contact
|
|
71
164
|
|
|
72
165
|
Have questions or suggestions? Reach out via:
|
package/inputs/index.js
CHANGED
|
@@ -84,7 +84,7 @@ export const makeToggle = (x = 0, y = 0, width = 50, height = 25) => {
|
|
|
84
84
|
toggleBtn.use(pos(height / 2, height / 2));
|
|
85
85
|
toggle.toggled = false;
|
|
86
86
|
} else {
|
|
87
|
-
toggle.use(color(
|
|
87
|
+
toggle.use(color(148, 188, 236));
|
|
88
88
|
toggleBtn.use(pos(width - height / 2, height / 2));
|
|
89
89
|
toggle.toggled = true;
|
|
90
90
|
}
|