@andersonalmeidax0/webcomponents 0.1.0 → 0.1.2
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 +16 -28
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,40 +1,23 @@
|
|
|
1
1
|
# webcomponents
|
|
2
|
-
React HTML controls, with convenience functions and events\
|
|
3
|
-
1 XButton: button (WHY COMPONENT?)
|
|
4
|
-
2 XInput: with numeric validation (shows error), transale "," to "." (store internally with different format) (WHY COMPONENT?)
|
|
5
|
-
3 XtextArea: (WHY COMPONENT?)
|
|
6
|
-
4 XSelect: input array key / value
|
|
7
|
-
5 XCheckbox: true/false
|
|
8
|
-
6 XDateSelect: (WHY COMPONENT?)
|
|
2
|
+
React HTML controls, with convenience functions and events\
|
|
3
|
+
1 XButton: button (WHY COMPONENT?)
|
|
4
|
+
2 XInput: with numeric validation (shows error), transale "," to "." (store internally with different format) (WHY COMPONENT?)
|
|
5
|
+
3 XtextArea: (WHY COMPONENT?)
|
|
6
|
+
4 XSelect: input array key / value
|
|
7
|
+
5 XCheckbox: true/false
|
|
8
|
+
6 XDateSelect: (WHY COMPONENT?)
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
# how to use:
|
|
12
|
-
1. Create index.html
|
|
13
|
-
2. Create App
|
|
12
|
+
1. Create index.html
|
|
13
|
+
2. Create App
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
17
17
|
## Example
|
|
18
18
|
```
|
|
19
|
-
<XButton id="bt1" type="button" disabled={false} label="Btn1" onClick={}/>
|
|
19
|
+
<XButton id="bt1" type="button" disabled={false} label="Btn1" onClick={}/>
|
|
20
20
|
|
|
21
|
-
```
|
|
22
|
-
### Example "routes": labels, links and components for navigation
|
|
23
|
-
```
|
|
24
|
-
var routes = [
|
|
25
|
-
{"route":"/page/page1","label":"PageNotes", "component":Page1},
|
|
26
|
-
{"route":"/page/page2","label":"PageNotes2", "component":Page2},
|
|
27
|
-
{"route":"/page/page3","label":"PageTestComps", "component":PageTestComps},
|
|
28
|
-
]
|
|
29
|
-
```
|
|
30
|
-
### Example appContext
|
|
31
|
-
```
|
|
32
|
-
let kc = {tokenParsed:{email:"noLogon@nologon"}, logout(){alert("Fake logout")}}
|
|
33
|
-
class AppContext {
|
|
34
|
-
constructor(kc){
|
|
35
|
-
this.kc=kc;
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
21
|
```
|
|
39
22
|
### Example PageComponent
|
|
40
23
|
```
|
|
@@ -44,7 +27,12 @@ class Page1 extends React.Component{
|
|
|
44
27
|
this.state ={}
|
|
45
28
|
}
|
|
46
29
|
render() {
|
|
47
|
-
return ( <React.Fragment
|
|
30
|
+
return ( <React.Fragment>
|
|
31
|
+
<XButton/>
|
|
32
|
+
<XSelect/>
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
...)
|
|
48
36
|
}
|
|
49
37
|
}
|
|
50
38
|
```
|