File tree Expand file tree Collapse file tree 2 files changed +34
-1
lines changed Expand file tree Collapse file tree 2 files changed +34
-1
lines changed Original file line number Diff line number Diff line change @@ -8,7 +8,7 @@ This library extends [Solid](https://github.com/solidjs/solid) by adding Custom
8
8
9
9
## Example
10
10
11
- [ See here] ( https://webcomponents.dev/edit/yGRb00wV4AMncPupRmA9 ) for an example of a webcomponent created by ` solid-element ` .
11
+ [ See here] ( ./sample.jsx ) for an example of a webcomponent created by ` solid-element ` .
12
12
13
13
## Installation
14
14
Original file line number Diff line number Diff line change
1
+ import { createSignal } from "solid-js" ;
2
+ import { customElement } from "solid-element" ;
3
+
4
+ const style = `div * {
5
+ font-size: 200%;
6
+ }
7
+
8
+ span {
9
+ width: 4rem;
10
+ display: inline-block;
11
+ text-align: center;
12
+ }
13
+
14
+ button {
15
+ width: 4rem;
16
+ height: 4rem;
17
+ border: none;
18
+ border-radius: 10px;
19
+ background-color: seagreen;
20
+ color: white;
21
+ }` ;
22
+
23
+ customElement ( "my-counter" , ( ) => {
24
+ const [ count , setCount ] = createSignal ( 0 ) ;
25
+ return (
26
+ < div >
27
+ < style > { style } </ style >
28
+ < button onClick = { ( ) => setCount ( count ( ) - 1 ) } > -</ button >
29
+ < span > { count } </ span >
30
+ < button onClick = { ( ) => setCount ( count ( ) + 1 ) } > +</ button >
31
+ </ div >
32
+ ) ;
33
+ } ) ;
You can’t perform that action at this time.
0 commit comments