diff options
Diffstat (limited to 'examples')
| -rw-r--r-- | examples/api/content.css | 26 | ||||
| -rw-r--r-- | examples/api/style.css | 10 |
2 files changed, 30 insertions, 6 deletions
diff --git a/examples/api/content.css b/examples/api/content.css new file mode 100644 index 0000000..5463ba2 --- /dev/null +++ b/examples/api/content.css @@ -0,0 +1,26 @@ + +#output-container-content { + padding: 0.5rem; + margin-top: 1rem; + border: 1px solid #888; + + --cssx-children: counter-text btn-increment; + --count: '0'; +} +#output-container-content::after { + content: "Loaded from external stylesheet"; +} + +#counter-text {} +#counter-text::after { content: var(--count) } + +#btn-increment { + display: inline-block; + border: 1px solid gray; + padding: 0.3rem 0.6rem; + font-size: 0.9rem; + cursor: pointer; + + --cssx-on-click: update(output-container-content, --count, '99'); +} +#btn-increment::after { content: "Increment" } diff --git a/examples/api/style.css b/examples/api/style.css index 213d9e2..81eada1 100644 --- a/examples/api/style.css +++ b/examples/api/style.css @@ -4,17 +4,18 @@ body { #load-btn { display: inline-block; - border: 1px solid gray; + background: #5180e9; + color: #000; padding: 0.5rem 1rem; cursor: pointer; --cssx-on-click: add-class(output-container, 'loading') add-class(load-btn, 'loading') - delay('2000') + load-cssx(output-container-content, './content.css') remove-class(output-container, 'loading') - add-class(output-container, 'loaded') remove-class(load-btn, 'loading') + delay('50') js-eval('alert("Loaded page")') ; } @@ -30,7 +31,4 @@ body { #output-container.loading::after { content: "Loading..."; } -#output-container.loaded::after { - content: "This content is loaded my guy"; -} |