DMLによるコンポーネントスイッチング
24397 ワード
DMLで、スイッチングコンポーネントは非常に簡単です、ベースポイントを選択し、'コンポーネントを呼び出します.
function Home () {
let home = div("HOME", cssComp);
selectBase(div('', 'margin-left:20px'));
print(`
<br >
DML doesn't interrupt your coding flow....
`)
unselectBase();
}
let Todo = () => {
let todo = selectBase(div("TODOS...", cssComp));
ul(["Task One", "Task Two"])
unselectBase();
}
function Counter () {
let counter = div("COUNTER", cssComp);
selectBase(counter);
let value = div("0");
button("inc").onclick = () =>
value.innerText = Number(value.innerText) + 1;
button("dec").onclick = () =>
value.innerText = Number(value.innerText) - 1;
unselectBase()
}
function cleanElt (elt) {
while(elt.firstChild) {
elt.removeChild(elt.firstChild);
}
}
function router(component) {
selectBase(main)
cleanElt(main);
component();
unselectBase();
}
function Navbar () {
selectBase(div('', cssNavbar))
button("Home",cssButton ).onclick = () => router(Home);
button("Todo", cssButton).onclick = () => router(Todo);
button("Counter", cssButton).onclick = () => router(Counter);
unselectBase();
}
Navbar();
let main = div('', cssContainer);
router(Home);
<html lang="de">
<head>
<meta charset="utf-8">
<title>title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://efpage.de/DML/DML_homepage/lib/DML-min.js"></script>
</head>
<body>
<script>
const cssComp = `
text-align:center;
font-size:32px;
color:white;
`;
const cssContainer = `
background:#344053;
height: calc(100vh - 70px);
color:white;
padding-top: 30px;
`;
const cssButton = `
color:black;
line-height: 2rem;
border: 1px solid transparent
margin-right: 5px;
cursor: pointer;
`
const cssNavbar = `
background: rgba(0,0,12,0.4);
border-bottom: 2px solid white;
`
function Home () {
let home = div("HOME", cssComp);
selectBase(div('', 'margin-left:20px'));
print(`
<br >
DML doesn't interrupt your coding flow....
`)
unselectBase();
}
let Todo = () => {
let todo = selectBase(div("TODOS...", cssComp));
ul(["Task One", "Task Two"])
unselectBase();
}
function Counter () {
let counter = div("COUNTER", cssComp);
selectBase(counter);
let value = div("0");
button("inc").onclick = () =>
value.innerText = Number(value.innerText) + 1;
bdec = button("dec").onclick = () =>
value.innerText = Number(value.innerText) - 1;
unselectBase()
}
function Tree () {
print("From the offical site : ")
br()
let base = selectBase(div("", "width:350px;margin:0 auto"))
let canvas = canvas2D()
let cx = canvas.ctx
// recursion
function branch(length, angle, scale, level) {
cx.fillRect(0, 0, .1 * length, length);
let r=constrain(level*25,0,255)
cx.fillStyle = "rgb("+r+ "," + (255-r)+ ",0)";
if (level > 10) { // -> exit
return;
}
cx.save();
cx.translate(0, length); // Draw
cx.rotate(-angle); branch(length * scale, angle, scale, level + 1);
cx.rotate(2 * angle); branch(length * scale, angle, scale, level + 1);
cx.restore();
}
// draw graphics
let w = canvas.width = base.clientWidth
canvas.height = w;
canvas.clear(); cx.translate(w / 2, w);
cx.rotate(-3.14152)
let t;
branch(base.clientWidth / 7, 0.33, 0.82, 0 , 0.01+0.1*Math.sin(0.1*t++))
unselectBase()
}
function cleanElt (elt) {
while(elt.firstChild) {
elt.removeChild(elt.firstChild);
}
}
function router(component) {
selectBase(main)
cleanElt(main);
component();
unselectBase();
}
function Navbar () {
selectBase(div('', cssNavbar))
button("Home",cssButton ).onclick = () => router(Home);
button("Canvas", cssButton).onclick = () => router(Tree);
button("Counter", cssButton).onclick = () => router(Counter);
unselectBase();
}
Navbar();
let main = div('', cssContainer);
router(Tree);
</script>
</body>
</html>
Reference
この問題について(DMLによるコンポーネントスイッチング), 我々は、より多くの情報をここで見つけました https://dev.to/artydev/components-switching-with-dml-16daテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol