rettangoli-ui 0.0.10 → 0.1.0-rc1
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 +28 -599
- package/dist/rettangoli-iife-layout.min.js +252 -245
- package/dist/rettangoli-iife-ui.min.js +517 -276
- package/package.json +10 -5
- package/LICENSE +0 -21
- package/dist/rettangoli-esm.min.js +0 -645
package/README.md
CHANGED
|
@@ -1,631 +1,60 @@
|
|
|
1
|
-
# rettangoli-ui
|
|
2
1
|
|
|
3
|
-
|
|
4
|
-
> This library is still in experimental mode. Expect API and UI breaking changes to happen without prior announcement.
|
|
2
|
+
# Rettangoli
|
|
5
3
|
|
|
6
|
-
|
|
4
|
+
A set of primitives that are all the necessary to build a UI framework
|
|
7
5
|
|
|
8
|
-
|
|
9
|
-
*
|
|
10
|
-
*
|
|
6
|
+
The following:
|
|
7
|
+
* rtgl-view
|
|
8
|
+
* rtgl-text
|
|
9
|
+
* rtgl-image
|
|
10
|
+
* rtgl-svg
|
|
11
|
+
* rtgl-button
|
|
11
12
|
|
|
13
|
+
All UI components should be able to be built from the above primitives
|
|
12
14
|
|
|
13
|
-
| Component | Component | Description |
|
|
14
|
-
| ------------------ | ----------------------------------- | ----------------------------------------------------------------------- |
|
|
15
|
-
| `<rtgl-view>` | [View](#rtgl-view) | Building block to build layouts |
|
|
16
|
-
| `<rtgl-button>` | [Button](#rtgl-button) | Buttons |
|
|
17
|
-
| `<rtgl-text>` | [Text](#rtgl-text) | Text |
|
|
18
|
-
| `<rtgl-image>` | [Image](#rtgl-image) | Image |
|
|
19
|
-
| `<rtgl-svg>` | [SVG](#rtgl-svg) | SVG |
|
|
20
|
-
| `<rtgl-form>` | [Form](#rtgl-form) | Forms |
|
|
21
15
|
|
|
16
|
+
## Development
|
|
22
17
|
|
|
23
|
-
|
|
18
|
+
### Install dependencies
|
|
24
19
|
|
|
25
|
-
The `rtgl-view` component offers a variety of attributes for extensive customization. Below are detailed tables for each attribute category.
|
|
26
|
-
|
|
27
|
-
| Attribute | Meaning | Values |
|
|
28
|
-
| --------- | ----------------------------------- | ----------------------------------------------------------------------- |
|
|
29
|
-
| `w` | [Width](#dimensions) | custom |
|
|
30
|
-
| `h` | [Height](#dimensions) | custom |
|
|
31
|
-
| `wh` | [Width and Height](#dimensions) | custom |
|
|
32
|
-
| `d` | [Direction](#direction) | `h`, `v` |
|
|
33
|
-
| `ah` | [Align Horizontal](#alignment) | `s`, `c`, `e` |
|
|
34
|
-
| `av` | [Align Vertical](#alignment) | `s`, `c`, `e` |
|
|
35
|
-
| `as` | [Align Self](#alignment) | `sch`, `s`, `c`, `e` |
|
|
36
|
-
| `f` | [Flex](#flex) | `1`, `0` |
|
|
37
|
-
| `fw` | [Flex Wrap](#flex-wrap) | `w` |
|
|
38
|
-
| `g` | [Flex Gap](#flex-gap) | `xs`, `s`, `m`, `l`, `xl` |
|
|
39
|
-
| `gh` | [Flex Gap Horizontal](#flex-gap) | `xs`, `s`, `m`, `l`, `xl` |
|
|
40
|
-
| `gv` | [Flex Gap Vertical](#flex-gap) | `xs`, `s`, `m`, `l`, `xl` |
|
|
41
|
-
| `m` | [Margin](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
42
|
-
| `mh` | [Margin Horizontal](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
43
|
-
| `mv` | [Margin Vertical](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
44
|
-
| `mt` | [Margin Top](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
45
|
-
| `mr` | [Margin Right](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
46
|
-
| `mb` | [Margin Bottom](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
47
|
-
| `ml` | [Margin Left](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
48
|
-
| `p` | [Padding](#padding) | `xs`, `s`, `m`, `l`, `xl` |
|
|
49
|
-
| `ph` | [Padding Horizontal](#padding) | `xs`, `s`, `m`, `l`, `xl` |
|
|
50
|
-
| `pv` | [Padding Vertical](#padding) | `xs`, `s`, `m`, `l`, `xl` |
|
|
51
|
-
| `pt` | [Padding Top](#padding) | `xs`, `s`, `m`, `l`, `xl` |
|
|
52
|
-
| `pr` | [Padding Right](#padding) | `xs`, `s`, `m`, `l`, `xl` |
|
|
53
|
-
| `pb` | [Padding Bottom](#padding) | `xs`, `s`, `m`, `l`, `xl` |
|
|
54
|
-
| `pl` | [Padding Left](#padding) | `xs`, `s`, `m`, `l`, `xl` |
|
|
55
|
-
| `bgc` | [Background Color](#background-color) | `p`, `pc`, `s`, `sc`, `e`, `ec`, `su `, `sucl`, `suc`, `such` |
|
|
56
|
-
| `h-bgc` | [Hover Background Color](#background-color) | `p`, `pc`, `s`, `sc`, `e`, `ec`, `su `, `sucl`, `suc`, `such` |
|
|
57
|
-
| `br` | [Border Radius](#border-radius) | `xs`, `s`, `m`, `l`, `xl`, `f` |
|
|
58
|
-
| `bw` | [Border Width](#border-width) | `xs`, `s`, `m`, `l`, `xl` |
|
|
59
|
-
| `bc` | [Border Color](#border-color) | `p`, `pc`, `s`, `sc`, `e`, `ec`, `su`, `sucl`, `suc`, `such` |
|
|
60
|
-
| `h-cur` | [Hover Cursor](#hover-cursor) | `p` |
|
|
61
|
-
|
|
62
|
-
### Dimensions
|
|
63
|
-
|
|
64
|
-
#### Attributes
|
|
65
|
-
|
|
66
|
-
| Attribute | Meaning | Description |
|
|
67
|
-
| --------- | ---------------- | ------------------------------ |
|
|
68
|
-
| `w` | Width | |
|
|
69
|
-
| `h` | Heigh | |
|
|
70
|
-
| `wh` | Width and Height | Will set both width and height |
|
|
71
|
-
|
|
72
|
-
#### Values
|
|
73
|
-
|
|
74
|
-
Values can bet set to any number. Can postfix the unit, otherwise it will default to `px`
|
|
75
|
-
|
|
76
|
-
#### Examples
|
|
77
|
-
|
|
78
|
-
Sets width and height to 120px
|
|
79
|
-
|
|
80
|
-
```html
|
|
81
|
-
<rtgl-view wh="120"></rtgl-view>
|
|
82
|
-
<rtgl-view wh="120px"></rtgl-view>
|
|
83
|
-
<rgtl-view w="120" h="120"></rtgl-view>
|
|
84
|
-
<rgtl-view w="120px" h="120px"></rtgl-view>
|
|
85
20
|
```
|
|
86
|
-
|
|
87
|
-
Can also use other units
|
|
88
|
-
|
|
89
|
-
```html
|
|
90
|
-
<rtgl-view width="100vw" height="100vh"></rtgl-view>
|
|
21
|
+
bun install
|
|
91
22
|
```
|
|
92
23
|
|
|
24
|
+
### Generate test screens
|
|
93
25
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
#### Attributes
|
|
97
|
-
|
|
98
|
-
| Attribute | Meaning | Description |
|
|
99
|
-
| --------- | ---------- | ------------------------------ |
|
|
100
|
-
| `d` | Direction | Children items will be oredred horizotannly or vertically |
|
|
101
|
-
|
|
102
|
-
#### Values
|
|
103
|
-
|
|
104
|
-
| Value | Meaning |
|
|
105
|
-
| ----- | -------- |
|
|
106
|
-
| `v` | Vertical |
|
|
107
|
-
| `h` | Horizontal |
|
|
108
|
-
|
|
109
|
-
### Alignment
|
|
110
|
-
|
|
111
|
-
#### Attributes
|
|
112
|
-
|
|
113
|
-
| Attribute | Meaning | Description |
|
|
114
|
-
| --------- | ---------------- | ------------------------------ |
|
|
115
|
-
| `ah` | Align Horizontal | Horizontally align child items |
|
|
116
|
-
| `av` | Align Vertical | Vertically align child items |
|
|
117
|
-
| `as` | Align Self | How to align self |
|
|
118
|
-
|
|
119
|
-
#### Values
|
|
26
|
+
Generate all test screens
|
|
120
27
|
|
|
121
|
-
| Value | Meaning | Default |
|
|
122
|
-
| ----- | ------- | ------- |
|
|
123
|
-
| | none | Yes |
|
|
124
|
-
| `s` | start | |
|
|
125
|
-
| `c` | center | |
|
|
126
|
-
| `e` | end | |
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
Only available for Align Self
|
|
130
|
-
|
|
131
|
-
| Value | Meaning | Default |
|
|
132
|
-
| ----- | ------- | ------- |
|
|
133
|
-
| `sch` | Stretch | |
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
#### Examples
|
|
137
|
-
|
|
138
|
-
```html
|
|
139
|
-
<rtgl-view ah="c"></rtgl-view>
|
|
140
|
-
<rtgl-view ah="e"></rtgl-view>
|
|
141
|
-
<rtgl-view av="c"></rtgl-view>
|
|
142
|
-
<rtgl-view av="e"></rtgl-view>
|
|
143
28
|
```
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
#### Attribute
|
|
149
|
-
|
|
150
|
-
| Attribute | Meaning | Description |
|
|
151
|
-
| --------- | ---------------- | ------------------------------ |
|
|
152
|
-
| `flex` | Flex | Flex grow and shirink |
|
|
153
|
-
|
|
154
|
-
#### Values
|
|
155
|
-
|
|
156
|
-
| Value | Meaning |
|
|
157
|
-
| -------- | ------- |
|
|
158
|
-
| `0` | 0 |
|
|
159
|
-
| `1` | 1 |
|
|
160
|
-
| `none` | none |
|
|
161
|
-
|
|
162
|
-
#### Examples
|
|
163
|
-
|
|
164
|
-
```html
|
|
165
|
-
<rtgl-view flex="1"></rtgl-view>
|
|
166
|
-
<rtgl-view flex="2"></rtgl-view>
|
|
167
|
-
<rtgl-view flex="3"></rtgl-view>
|
|
29
|
+
bun run esbuild
|
|
30
|
+
bun run ./viz/cli.js generate
|
|
31
|
+
bunx serve ./viz/_site
|
|
168
32
|
```
|
|
169
33
|
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
#### Attributes
|
|
34
|
+
Visit your browser at http://localhost:3000/view
|
|
173
35
|
|
|
174
|
-
|
|
175
|
-
| --------- | ---------------- | ------------------------------ |
|
|
176
|
-
| `fw` | Flex Wrap | Flex wrap or no wrap |
|
|
36
|
+
It should show you all the test cases for View compoenent, and can navigate to other components on the left sidebar
|
|
177
37
|
|
|
178
|
-
|
|
38
|
+
### Report
|
|
179
39
|
|
|
180
|
-
|
|
181
|
-
| ----- | ------- |
|
|
182
|
-
| `w` | wrap |
|
|
183
|
-
|
|
184
|
-
#### Examples
|
|
185
|
-
|
|
186
|
-
```html
|
|
187
|
-
<rtgl-view fw="w"></rtgl-view>
|
|
40
|
+
Make sure the run `generate` first
|
|
188
41
|
```
|
|
189
|
-
|
|
190
|
-
### Flex Gap
|
|
191
|
-
|
|
192
|
-
#### Attributes
|
|
193
|
-
|
|
194
|
-
| Attribute | Meaning | Description |
|
|
195
|
-
| --------- | ------------------- | ------------------------------------- |
|
|
196
|
-
| `g` | Flex Gap | Flex Gap both horizontal and vertical |
|
|
197
|
-
| `gh` | Flex Gap Horizontal | Flex Gap Horizontal |
|
|
198
|
-
| `gv` | Flex Gap Vertical | Flex Gap Vertical |
|
|
199
|
-
|
|
200
|
-
#### Values
|
|
201
|
-
|
|
202
|
-
| Value | Meaning |
|
|
203
|
-
| ------ | ----------- |
|
|
204
|
-
| `xs` | Extra small |
|
|
205
|
-
| `s` | Small |
|
|
206
|
-
| `m` | Medium |
|
|
207
|
-
| `l` | Large |
|
|
208
|
-
| `xl` | Extra large |
|
|
209
|
-
|
|
210
|
-
#### Examples
|
|
211
|
-
|
|
212
|
-
```html
|
|
213
|
-
<rtgl-view g="m"></rtgl-view>
|
|
214
|
-
<rtgl-view gh="m" gv="m"></rtgl-view>
|
|
42
|
+
bun run ./viz/cli.js report
|
|
215
43
|
```
|
|
216
44
|
|
|
45
|
+
Visit your browser at http://localhost:3000/report (make sure you're still serving the `./viz/_site` folder)
|
|
217
46
|
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
#### Attributes
|
|
221
|
-
|
|
222
|
-
| Attribute | Meaning | Description |
|
|
223
|
-
| --------- | ----------------- | ------------------------------- |
|
|
224
|
-
| `m` | Margin | Sets margin in all 4 directions |
|
|
225
|
-
| `mh` | Margin Horizontal | Sets left and right margin |
|
|
226
|
-
| `mv` | Margin Vertical | Sets top and bottom margin |
|
|
227
|
-
| `mt` | Margin Top | |
|
|
228
|
-
| `ml` | Margin Left | |
|
|
229
|
-
| `mb` | Margin Bottom | |
|
|
230
|
-
| `mr` | Margin Right | |
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
#### Values
|
|
234
|
-
|
|
235
|
-
| Value | Meaning |
|
|
236
|
-
| ------ | ----------- |
|
|
237
|
-
| `xs` | Extra small |
|
|
238
|
-
| `s` | Small |
|
|
239
|
-
| `m` | Medium |
|
|
240
|
-
| `l` | Large |
|
|
241
|
-
| `xl` | Extra large |
|
|
47
|
+
This will compare any changes between current version and the `gold` version screenshots
|
|
242
48
|
|
|
243
|
-
|
|
49
|
+
### Accept
|
|
244
50
|
|
|
245
|
-
|
|
246
|
-
```html
|
|
247
|
-
<rtgl-view m="m"></rtgl-view>
|
|
248
|
-
<rtgl-view mh="m" mv="m"></rtgl-view>
|
|
249
|
-
<rtgl-view mt="m" mr="m" mb="m" ml="m"></rtgl-view>
|
|
250
51
|
```
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
### Padding
|
|
254
|
-
|
|
255
|
-
#### Attributes
|
|
256
|
-
|
|
257
|
-
| Attribute | Meaning | Description |
|
|
258
|
-
| --------- | ----------------- | ------------------------------- |
|
|
259
|
-
| `p` | Padding | Sets padding in all 4 directions |
|
|
260
|
-
| `ph` | Padding Horizontal | Sets left and right padding |
|
|
261
|
-
| `pv` | Padding Vertical | Sets top and bottom padding |
|
|
262
|
-
| `pt` | Padding Top | |
|
|
263
|
-
| `pl` | Padding Left | |
|
|
264
|
-
| `pb` | Padding Bottom | |
|
|
265
|
-
| `pr` | Padding Right | |
|
|
266
|
-
|
|
267
|
-
#### Values
|
|
268
|
-
|
|
269
|
-
| Value | Meaning |
|
|
270
|
-
| ------ | ----------- |
|
|
271
|
-
| `xs` | Extra small |
|
|
272
|
-
| `s` | Small |
|
|
273
|
-
| `m` | Medium |
|
|
274
|
-
| `l` | Large |
|
|
275
|
-
| `xl` | Extra large |
|
|
276
|
-
|
|
277
|
-
#### Examples
|
|
278
|
-
|
|
279
|
-
```html
|
|
280
|
-
<rtgl-view p="m"></rtgl-view>
|
|
281
|
-
<rtgl-view ph="m" pv="m"></rtgl-view>
|
|
282
|
-
<rtgl-view pt="m" pr="m" pb="m" pl="m"></rtgl-view>
|
|
52
|
+
bun run ./viz/cli.js accept
|
|
283
53
|
```
|
|
284
54
|
|
|
55
|
+
Updates the `gold` version screenshots with the current version.
|
|
285
56
|
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
#### Attributes
|
|
289
|
-
|
|
290
|
-
| Attribute | Meaning | Description |
|
|
291
|
-
| --------- | ---------------- | ------------------------------ |
|
|
292
|
-
| `bgc` | Background Color | Background Color |
|
|
293
|
-
| `h-bgc` | Hover Background Color | Background Color |
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
#### Values
|
|
297
|
-
|
|
298
|
-
| Value | Meaning |
|
|
299
|
-
| ------- | --------------------- |
|
|
300
|
-
| `p` | primary |
|
|
301
|
-
| `pc` | primary-container |
|
|
302
|
-
| `s` | secondary |
|
|
303
|
-
| `sc` | secondary container |
|
|
304
|
-
| `e` | error |
|
|
305
|
-
| `ec` | error-container |
|
|
306
|
-
| `su` | surface |
|
|
307
|
-
| `sucl` | surface container low |
|
|
308
|
-
| `suc` | surface container |
|
|
309
|
-
| `such` | suface container high |
|
|
310
|
-
|
|
311
|
-
#### Examples
|
|
312
|
-
|
|
313
|
-
TODO
|
|
314
|
-
|
|
315
|
-
### Border Radius
|
|
316
|
-
|
|
317
|
-
#### Attributes
|
|
318
|
-
|
|
319
|
-
| Attribute | Meaning | Description |
|
|
320
|
-
| --------- | ---------------- | ------------------------------ |
|
|
321
|
-
| `br` | Border Radius | Border Radius |
|
|
322
|
-
|
|
323
|
-
#### Values
|
|
324
|
-
|
|
325
|
-
| Value | Meaning |
|
|
326
|
-
| ------ | ----------- |
|
|
327
|
-
| `xs` | Extra small |
|
|
328
|
-
| `s` | Small |
|
|
329
|
-
| `m` | Medium |
|
|
330
|
-
| `l` | Large |
|
|
331
|
-
| `xl` | Extra large |
|
|
332
|
-
| `f` | Full |
|
|
333
|
-
|
|
334
|
-
#### Examples
|
|
335
|
-
|
|
336
|
-
TODO
|
|
337
|
-
|
|
338
|
-
### Border Width
|
|
339
|
-
|
|
340
|
-
#### Attributes
|
|
341
|
-
|
|
342
|
-
| Attribute | Meaning | Description |
|
|
343
|
-
| --------- | ---------------- | ------------------------------ |
|
|
344
|
-
| `bw` | Border Width | Border Width |
|
|
345
|
-
|
|
346
|
-
#### Values
|
|
347
|
-
|
|
348
|
-
| Value | Meaning |
|
|
349
|
-
| ------ | ----------- |
|
|
350
|
-
| `xs` | Extra small |
|
|
351
|
-
| `s` | Small |
|
|
352
|
-
| `m` | Medium |
|
|
353
|
-
| `l` | Large |
|
|
354
|
-
| `xl` | Extra large |
|
|
57
|
+
Run this after you have made sure that the report is what you expect
|
|
355
58
|
|
|
356
|
-
#### Examples
|
|
357
|
-
|
|
358
|
-
TODO
|
|
359
|
-
|
|
360
|
-
### Border Color
|
|
361
|
-
|
|
362
|
-
#### Attributes
|
|
363
|
-
|
|
364
|
-
| Attribute | Meaning | Description |
|
|
365
|
-
| --------- | ---------------- | ------------------------------ |
|
|
366
|
-
| `bc` | Border Color | Border Color |
|
|
367
|
-
|
|
368
|
-
#### Values
|
|
369
|
-
|
|
370
|
-
| Value | Meaning |
|
|
371
|
-
| ------- | --------------------- |
|
|
372
|
-
| `p` | primary |
|
|
373
|
-
| `pc` | primary-container |
|
|
374
|
-
| `s` | secondary |
|
|
375
|
-
| `sc` | secondary container |
|
|
376
|
-
| `e` | error |
|
|
377
|
-
| `ec` | error-container |
|
|
378
|
-
| `s` | surface |
|
|
379
|
-
| `scl` | surface container low |
|
|
380
|
-
| `sc` | surface container |
|
|
381
|
-
| `sch` | suface container high |
|
|
382
|
-
|
|
383
|
-
#### Examples
|
|
384
|
-
|
|
385
|
-
TODO
|
|
386
|
-
|
|
387
|
-
### Hover Cursor
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
#### Attributes
|
|
391
|
-
|
|
392
|
-
| Attribute | Meaning | Description |
|
|
393
|
-
| --------- | ---------------- | ------------------------------ |
|
|
394
|
-
| `h-cur` | Hover Cursor | Hover Cursor |
|
|
395
|
-
|
|
396
|
-
#### Values
|
|
397
|
-
|
|
398
|
-
| Value | Meaning |
|
|
399
|
-
| ------- | --------------------- |
|
|
400
|
-
| `p` | Pointer |
|
|
401
|
-
|
|
402
|
-
#### Examples
|
|
403
|
-
|
|
404
|
-
TODO
|
|
405
|
-
|
|
406
|
-
## rtgl-button
|
|
407
|
-
|
|
408
|
-
The `rtgl-button` provides basic styling for buttons
|
|
409
|
-
|
|
410
|
-
| Attribute | Meaning | Values |
|
|
411
|
-
| --------- | ------------------------------------ | ----------------------------------------------------------------------- |
|
|
412
|
-
| `t` | [Type](#type) | `p`, `pl`, `ps`, `s`, `sl`, `ss`, `e`, `el`, `n`, `nl`, `ns` |
|
|
413
|
-
| `f` | [Flex](#flex) | `1`, `0` |
|
|
414
|
-
| `as` | [Align Self](#alignment) | `sch`, `s`, `c`, `e` |
|
|
415
|
-
| `m` | [Margin](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
416
|
-
| `mh` | [Margin Horizontal](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
417
|
-
| `mv` | [Margin Vertical](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
418
|
-
| `mt` | [Margin Top](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
419
|
-
| `mr` | [Margin Right](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
420
|
-
| `mb` | [Margin Bottom](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
421
|
-
| `ml` | [Margin Left](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
### Type
|
|
425
|
-
|
|
426
|
-
#### Attributes
|
|
427
|
-
|
|
428
|
-
| Attribute | Meaning | Description |
|
|
429
|
-
| --------- | ---------------- | ------------------------------ |
|
|
430
|
-
| `t` | Type | Provides type combinations for different sizes and color styles |
|
|
431
|
-
|
|
432
|
-
#### Values
|
|
433
|
-
|
|
434
|
-
| Value | Meaning |
|
|
435
|
-
| ------- | --------------------- |
|
|
436
|
-
| `p` | Primary |
|
|
437
|
-
| `pl` | Primary Large |
|
|
438
|
-
| `ps` | Primary Small |
|
|
439
|
-
| `s` | Secondary |
|
|
440
|
-
| `sl` | Secondary Large |
|
|
441
|
-
| `ss` | Secondary Small |
|
|
442
|
-
| `e` | Error |
|
|
443
|
-
| `el` | Error Large |
|
|
444
|
-
| `es` | Error Small |
|
|
445
|
-
| `e` | Neutral |
|
|
446
|
-
| `el` | Neutral Large |
|
|
447
|
-
| `es` | Neutral Small |
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
## rtgl-text
|
|
451
|
-
|
|
452
|
-
The `rtgl-text` provides text in standard sizes and colors
|
|
453
|
-
|
|
454
|
-
| Attribute | Meaning | Values |
|
|
455
|
-
| --------- | ------------------------------------ | -------------------------------------------------------------------------------- |
|
|
456
|
-
| `s` | [Size](#size) | `dm`, `hm`, `tl`, `tm`, `ts`, `bl`, `bm`, `bs`, `ll`, `lm` |
|
|
457
|
-
| `c` | [Color](#color) | `on-p`, `on-pc`, `on-s` , `on-sc`, `on-su`, `on-suv`, `i-on-s`, `on-e`, `on-ec` |
|
|
458
|
-
| `f` | [Flex](#flex) | `1`, `0` |
|
|
459
|
-
| `as` | [Align Self](#alignment) | `sch`, `s`, `c`, `e` |
|
|
460
|
-
| `m` | [Margin](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
461
|
-
| `mh` | [Margin Horizontal](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
462
|
-
| `mv` | [Margin Vertical](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
463
|
-
| `mt` | [Margin Top](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
464
|
-
| `mr` | [Margin Right](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
465
|
-
| `mb` | [Margin Bottom](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
466
|
-
| `ml` | [Margin Left](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
467
|
-
| `h-cur` | [Hover Cursor](#hover-cursor) | `p` |
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
### Size
|
|
472
|
-
|
|
473
|
-
#### Attributes
|
|
474
|
-
|
|
475
|
-
| Attribute | Meaning | Description |
|
|
476
|
-
| --------- | ---------------- | ------------------------------ |
|
|
477
|
-
| `s` | Size | Text sizes |
|
|
478
|
-
|
|
479
|
-
#### Values
|
|
480
|
-
|
|
481
|
-
| Value | Meaning |
|
|
482
|
-
| ------- | ------------------ |
|
|
483
|
-
| `dm` | Display Medium |
|
|
484
|
-
| `hm` | Headline Medium |
|
|
485
|
-
| `tl` | Title Large |
|
|
486
|
-
| `tm` | Title Medium |
|
|
487
|
-
| `ts` | Title Small |
|
|
488
|
-
| `bl` | Body Large |
|
|
489
|
-
| `bm` | Body Medium |
|
|
490
|
-
| `bs` | Body Small |
|
|
491
|
-
| `ll` | Label Large |
|
|
492
|
-
| `lm` | Label Medium |
|
|
493
|
-
|
|
494
|
-
#### Examples
|
|
495
|
-
|
|
496
|
-
TODO
|
|
497
|
-
|
|
498
|
-
### Color
|
|
499
|
-
|
|
500
|
-
#### Attributes
|
|
501
|
-
|
|
502
|
-
| Attribute | Meaning | Description |
|
|
503
|
-
| --------- | ---------------- | ------------------------------ |
|
|
504
|
-
| `c` | Color | Text color |
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
#### Values
|
|
508
|
-
|
|
509
|
-
| Value | Meaning |
|
|
510
|
-
| ---------- | ---------------------- |
|
|
511
|
-
| `on-p` | On Primary |
|
|
512
|
-
| `on-pc` | On Primary Container |
|
|
513
|
-
| `on-s` | On Secondary |
|
|
514
|
-
| `on-sc` | On Secondary Container |
|
|
515
|
-
| `on-su` | On Surface |
|
|
516
|
-
| `on-suv` | on Surface Variant |
|
|
517
|
-
| `i-on-s` | Inverse on surface |
|
|
518
|
-
| `on-e` | On Error |
|
|
519
|
-
| `on-ec` | On Error Container |
|
|
520
|
-
|
|
521
|
-
#### Examples
|
|
522
|
-
|
|
523
|
-
TODO
|
|
524
|
-
|
|
525
|
-
## rtgl-image
|
|
526
|
-
|
|
527
|
-
Displays images
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
| Attribute | Meaning | Values |
|
|
531
|
-
| --------- | ------------------------------------ | -------------------------------------------------------------------------------- |
|
|
532
|
-
| `w` | [Width](#dimensions) | custom |
|
|
533
|
-
| `h` | [Height](#dimensions) | custom |
|
|
534
|
-
| `wh` | [Width and Height](#dimensions) | custom |
|
|
535
|
-
| `src` | [Source](#source) | custom |
|
|
536
|
-
| `of` | [Object Fit](#object-fit) | `cov`, `con` |
|
|
537
|
-
| `f` | [Flex](#flex) | `1`, `0` |
|
|
538
|
-
| `as` | [Align Self](#alignment) | `sch`, `s`, `c`, `e` |
|
|
539
|
-
| `m` | [Margin](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
540
|
-
| `mh` | [Margin Horizontal](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
541
|
-
| `mv` | [Margin Vertical](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
542
|
-
| `mt` | [Margin Top](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
543
|
-
| `mr` | [Margin Right](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
544
|
-
| `mb` | [Margin Bottom](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
545
|
-
| `ml` | [Margin Left](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
546
|
-
| `h-cur` | [Hover Cursor](#hover-cursor) | `p` |
|
|
547
|
-
| `br` | [Border Radius](#border-radius) | `xs`, `s`, `m`, `l`, `xl`, `f` |
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
### Source
|
|
551
|
-
|
|
552
|
-
#### Attributes
|
|
553
|
-
| Attribute | Meaning | Description |
|
|
554
|
-
| --------- | ---------------- | ------------------------------ |
|
|
555
|
-
| `src` | Source | Same as standard `<img src="">` |
|
|
556
|
-
|
|
557
|
-
#### Values
|
|
558
|
-
|
|
559
|
-
Should be a url to a remote or local image
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
#### Examples
|
|
563
|
-
|
|
564
|
-
TODO
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
### Object Fit
|
|
568
|
-
|
|
569
|
-
#### Attributes
|
|
570
|
-
| Attribute | Meaning | Description |
|
|
571
|
-
| --------- | ---------------- | ------------------------------ |
|
|
572
|
-
| `of` | Object Fit | |
|
|
573
|
-
|
|
574
|
-
#### Values
|
|
575
|
-
|
|
576
|
-
| Value | Meaning |
|
|
577
|
-
| ---------- | ---------------------- |
|
|
578
|
-
| `cov` | Cover |
|
|
579
|
-
| `con` | Contain |
|
|
580
|
-
|
|
581
|
-
#### Examples
|
|
582
|
-
|
|
583
|
-
TODO
|
|
584
|
-
|
|
585
|
-
## rtgl-svg
|
|
586
|
-
|
|
587
|
-
| Attribute | Meaning | Values |
|
|
588
|
-
| --------- | ------------------------------------ | -------------------------------------------------------------------------------- |
|
|
589
|
-
| `w` | [Width](#dimensions) | custom |
|
|
590
|
-
| `h` | [Height](#dimensions) | custom |
|
|
591
|
-
| `wh` | [Width and Height](#dimensions) | custom |
|
|
592
|
-
| `svg` | [SVG](#svg) | custom |
|
|
593
|
-
| `f` | [Flex](#flex) | `1`, `0` |
|
|
594
|
-
| `m` | [Margin](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
595
|
-
| `as` | [Align Self](#alignment) | `sch`, `s`, `c`, `e` |
|
|
596
|
-
| `mh` | [Margin Horizontal](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
597
|
-
| `mv` | [Margin Vertical](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
598
|
-
| `mt` | [Margin Top](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
599
|
-
| `mr` | [Margin Right](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
600
|
-
| `mb` | [Margin Bottom](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
601
|
-
| `ml` | [Margin Left](#margin) | `xs`, `s`, `m`, `l`, `xl` |
|
|
602
|
-
| `h-cur` | [Hover Cursor](#hover-cursor) | `p` |
|
|
603
|
-
|
|
604
|
-
### SVG
|
|
605
|
-
|
|
606
|
-
#### Attributes
|
|
607
|
-
| Attribute | Meaning | Description |
|
|
608
|
-
| --------- | ---------------- | ------------------------------ |
|
|
609
|
-
| `svg` | SVG | |
|
|
610
|
-
|
|
611
|
-
#### Values
|
|
612
|
-
|
|
613
|
-
Name of the svg
|
|
614
|
-
All names must be registered with global window variable:
|
|
615
|
-
|
|
616
|
-
```js
|
|
617
|
-
window.rtglSvgs = {
|
|
618
|
-
'svgName1': '<svg>...</svg>',
|
|
619
|
-
'svgName2': '<svg>...</svg>'
|
|
620
|
-
}
|
|
621
|
-
```
|
|
622
|
-
|
|
623
|
-
#### Examples
|
|
624
|
-
|
|
625
|
-
```html
|
|
626
|
-
<rtgl-svg svg="svgName1"></rtgl-svg>
|
|
627
|
-
```
|
|
628
59
|
|
|
629
|
-
## rtgl-form
|
|
630
60
|
|
|
631
|
-
TODO
|