mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-04-01 19:55:53 +02:00
🔤
This commit is contained in:
parent
b08f75bfb0
commit
f2ce23d9f7
@ -1,35 +1,38 @@
|
||||
import { el, assign } from "deka-dom-el";
|
||||
import { el, on, scope } from "deka-dom-el";
|
||||
import { S } from "deka-dom-el/signals";
|
||||
|
||||
// Create a component with reactive elements
|
||||
function ReactiveCounter() {
|
||||
const count = S(0);
|
||||
|
||||
// Elements created with el() have data-dde attribute
|
||||
const counter = el('div', {
|
||||
id: 'counter',
|
||||
// This element will have __dde_reactive property
|
||||
textContent: count
|
||||
});
|
||||
|
||||
const incrementBtn = el('button', {
|
||||
textContent: 'Increment',
|
||||
onclick: () => count.set(count.get() + 1)
|
||||
});
|
||||
|
||||
// Dynamic section with __dde_signal property
|
||||
const counterInfo = S.el(count, value =>
|
||||
el('p', `Current count is ${value}`)
|
||||
);
|
||||
|
||||
return el('div').append(
|
||||
counter,
|
||||
incrementBtn,
|
||||
counterInfo
|
||||
);
|
||||
const count = S(0);
|
||||
scope.host(on.connected(ev=>
|
||||
console.log(ev.target.__dde_reactive)
|
||||
));
|
||||
|
||||
const counter = el('div', {
|
||||
// This element will be added into the __dde_reactive property
|
||||
textContent: count,
|
||||
});
|
||||
|
||||
const incrementBtn = el('button', {
|
||||
textContent: 'Increment',
|
||||
onclick: () => count.set(count.get() + 1)
|
||||
});
|
||||
|
||||
// Dynamic section will be added into __dde_signal property
|
||||
const counterInfo = S.el(count, value =>
|
||||
el('p', `Current count is ${value}`)
|
||||
);
|
||||
|
||||
return el('div', { id: 'counter' }).append(
|
||||
counter,
|
||||
incrementBtn,
|
||||
counterInfo
|
||||
);
|
||||
}
|
||||
document.body.append(
|
||||
el(ReactiveCounter),
|
||||
);
|
||||
|
||||
// In DevTools console:
|
||||
// document.querySelectorAll('[data-dde]'); // Find all elements created with deka-dom-el
|
||||
// const counter = document.querySelector('#counter');
|
||||
// console.log(counter.__dde_reactive); // See reactive bindings
|
||||
const counter = document.querySelector('#counter');
|
||||
setTimeout(()=> console.log(counter.__dde_reactive), 1000); // See reactive bindings
|
||||
|
@ -133,6 +133,7 @@ body {
|
||||
"sidebar"
|
||||
"content";
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
::selection {
|
||||
|
@ -14,7 +14,10 @@ ${host} {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
box-shadow: var(--shadow);
|
||||
min-height: var(--header-height);
|
||||
min-height: calc(var(--header-height) - 1em);
|
||||
--_m: .75em;
|
||||
margin: var(--_m) var(--_m) 0 var(--_m);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
${host} .header-title {
|
||||
|
Loading…
x
Reference in New Issue
Block a user