mirror of
				https://github.com/jaandrle/deka-dom-el
				synced 2025-11-04 07:09:15 +01:00 
			
		
		
		
	🔤 updated docs (examples)
This commit is contained in:
		@@ -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",
 | 
			
		||||
		})
 | 
			
		||||
	)
 | 
			
		||||
);
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -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; }")
 | 
			
		||||
 
 | 
			
		||||
@@ -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>"),
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user