diff options
| author | Akshay Nair <phenax5@gmail.com> | 2023-08-10 14:18:02 +0530 |
|---|---|---|
| committer | Akshay Nair <phenax5@gmail.com> | 2023-08-10 14:18:02 +0530 |
| commit | b6213f660b6a706f48289b492f305bc2f4620f80 (patch) | |
| tree | 4fde7988ca4b3640abfa01a8b473a2e768572514 /examples | |
| parent | 5a659a47c6e4823c2e29dd03eb8988270157de43 (diff) | |
| download | css-everything-b6213f660b6a706f48289b492f305bc2f4620f80.tar.gz css-everything-b6213f660b6a706f48289b492f305bc2f4620f80.zip | |
feat: style injection
Diffstat (limited to 'examples')
| -rw-r--r-- | examples/counter/index.html | 11 | ||||
| -rw-r--r-- | examples/counter/style.css | 26 |
2 files changed, 37 insertions, 0 deletions
diff --git a/examples/counter/index.html b/examples/counter/index.html new file mode 100644 index 0000000..158ee16 --- /dev/null +++ b/examples/counter/index.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Counter example</title> + <meta charset="UTF-8"> + <link href="./style.css" rel="stylesheet"> + </head> + <body> + <script async defer src="../../dist/index.js"></script> + </body> +</html> diff --git a/examples/counter/style.css b/examples/counter/style.css new file mode 100644 index 0000000..9cf50e0 --- /dev/null +++ b/examples/counter/style.css @@ -0,0 +1,26 @@ +body { + --cssx-children: container todo-container; + --cssx-on-load: js(console.log("what have we done?!")); +} + +#container { + --cssx-children: counter btn-increment; + --count: '0'; +} + +#counter { +} +#counter::before { + content: "Count: " var(--count); +} + +#btn-increment { + display: inline-block; + padding: 0.5rem 1rem; + border: 1px solid gray; + + --cssx-on-click: update(container, --count, calc(var(--count) + 1)); +} +#btn-increment::after { + content: "Increment"; +} |