1
0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-04-01 19:55:53 +02:00

🔤 updated docs (examples)

This commit is contained in:
Jan Andrle 2024-12-11 16:20:49 +01:00
parent 513c32eb37
commit bcddc75f56
Signed by: jaandrle
GPG Key ID: B3A25AED155AFFAB
3 changed files with 15 additions and 12 deletions

View File

@ -1,15 +1,18 @@
import { el } from "deka-dom-el";
import { S } from "deka-dom-el/signals";
const clicks= S(0); // A
document.body.append(
el().append(
el(HelloWorldComponent)
);
function HelloWorldComponent(){
const clicksS= S(0); // A
return el().append(
el("p", S(()=>
"Hello World "+"🎉".repeat(clicks()) // B
"Hello World "+"🎉".repeat(clicksS()) // B
)),
el("button", {
type: "button",
onclick: ()=> clicks(clicks()+1), // C
onclick: ()=> clicksS(clicksS()+1), // C
textContent: "Fire",
})
)
);
}

View File

@ -4,7 +4,7 @@ const count= S(0);
import { el } from "deka-dom-el";
document.body.append(
el("p", S(()=> "Currently: "+count())),
el("p", { classList: { red: S(()=> count()%2) }, dataset: { count }, textContent: "Attributes example" })
el("p", { classList: { red: S(()=> count()%2 === 0) }, dataset: { count }, textContent: "Attributes example" })
);
document.head.append(
el("style", ".red { color: red; }")

View File

@ -4,24 +4,24 @@ import { mnemonicUl } from "../mnemonicUl.html.js";
export function mnemonic(){
return mnemonicUl().append(
el("li").append(
el("code", "assign(<element>, ...<idl-objects>): <element>"),
" — assign properties to the element",
el("code", "assign(<element>, ...<objects>): <element>"),
" — assign properties (prefered, or attributes) to the element",
),
el("li").append(
el("code", "el(<tag-name>, <primitive>)[.append(...)]: <element-from-tag-name>"),
" — simple element containing only text",
),
el("li").append(
el("code", "el(<tag-name>, <idl-object>)[.append(...)]: <element-from-tag-name>"),
" — element with more properties",
el("code", "el(<tag-name>, <object>)[.append(...)]: <element-from-tag-name>"),
" — element with more properties (prefered, or attributes)",
),
el("li").append(
el("code", "el(<function>, <function-argument(s)>)[.append(...)]: <element-returned-by-function>"),
" — using component represented by function",
" — using component represented by function (must accept object like for <tag-name>)",
),
el("li").append(
el("code", "el(<...>, <...>, ...<addons>)"),
" — see following page"
" — see following section of documentation",
),
el("li").append(
el("code", "elNS(<namespace>)(<as-el-see-above>)[.append(...)]: <element-based-on-arguments>"),