From 6a04167058b59b54b183104a1cf1b1b2cf8d7e9a Mon Sep 17 00:00:00 2001 From: Akshay Nair Date: Thu, 10 Aug 2023 18:18:25 +0530 Subject: feat: adds dummy example ideas --- examples/api/index.html | 11 +++++++++++ examples/api/style.css | 22 ++++++++++++++++++++++ examples/todo-list/style.css | 38 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 71 insertions(+) create mode 100644 examples/api/index.html create mode 100644 examples/api/style.css create mode 100644 examples/todo-list/style.css (limited to 'examples') diff --git a/examples/api/index.html b/examples/api/index.html new file mode 100644 index 0000000..158ee16 --- /dev/null +++ b/examples/api/index.html @@ -0,0 +1,11 @@ + + + + Counter example + + + + + + + diff --git a/examples/api/style.css b/examples/api/style.css new file mode 100644 index 0000000..ad1dff9 --- /dev/null +++ b/examples/api/style.css @@ -0,0 +1,22 @@ +body { + --cssx-children: load-btn output-container; +} + +#load-btn { + --cssx-on-click: + add-class(load-btn, 'loading') + get(url('./more-style.css')) + add-class(load-btn, 'hidden'); +} +#load-btn.loading { + pointer-events: none; + opacity: 0.4; +} +#load-btn.hidden { + display: none; +} + +#output-container { + --cssx-children: output-container-content; +} + diff --git a/examples/todo-list/style.css b/examples/todo-list/style.css new file mode 100644 index 0000000..aeffde5 --- /dev/null +++ b/examples/todo-list/style.css @@ -0,0 +1,38 @@ +body { + --cssx-children: todo-container; +} + +#todo-container { + --cssx-children: todo-input todo-list; + --todo-list: list(); +} + +#todo-input { + --cssx-children: input-field submit-btn; +} + +#submit-btn { + --cssx-on-click: update( + todo-container, + --todo-list, + list-append( + var(--todo-list), + tuple(get-attr(input-field, value), false) + ) + ); +} +#submit-btn::after { + content: "Submit"; +} + +#todo-list { + --cssx-iter-children: iter(var(--todo-list), --todo-item, todo-item); +} + +#todo-item { + +} +#todo-item::after { + content: var(--todo-item); +} + -- cgit v1.3.1