blob: 663df66e66f3e2b726040d5d038cfeb133eeb6d0 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
# Element hooks
```css
#my-element {
--cssx-on-mount: /* code */;
--cssx-on-update: /* code */;
--cssx-on-click: /* code */;
}
```
## Mount
Mount is mount. Remember when react used to call it that? Yeah, fun times.
It'll allow you to run code as soon as the element in the dom.
```css
#my-element {
--cssx-on-mount: add-class('animate');
}
```
## Update
The way you manage state in css-everything is as css custom properties.
Sometimes you may need to react to those changes. That's where the update hook comes in.
The update hook gets called every time a css property on the element is updated via the `update` function.
NOTE: Update hook is only called for the element that gets updated, not it's children.
```css
#my-element {
background-color: Salmon;
color: PowderBlue;
--my-state: false;
--cssx-on-update: if(get-var(--my-state), add-class('some-state'), remove-class('some-state'));
--cssx-children: button#my-btn;
}
#my-element.some-state {
background-color: PapayaWhip;
color: SeaShell;
}
/* #my-btn has access to --is-visible because it is #my-element's child */
#my-btn {
--cssx-on-click: update(my-element, --is-visible, if(get-var(--my-state), true, false));
}
```
## Events
Other than the above 2 events, the rest are just standard browser events.
Only the following are supported as of right now as my fingers are typing this out -
- `--cssx-on-click`
- `--cssx-on-focus`
- `--cssx-on-blur`
- `--cssx-on-submit`
Adding support for most other events is pretty trivial. I'm just kinda lazy.
|
