stear/example/menu.js
2022-10-09 16:36:35 +02:00

76 lines
No EOL
2.1 KiB
JavaScript

import { Stear, SWindow, _ } from "../stear/main.js";
import apps from "./apps.js";
import settings from "./settings.js";
import splash from "./splash.js";
const call = async (stear, { find, resolve, close, render, call, include, event }, args) => {
/*event.onloaded = () => { }*/
/*event.onresolve = async () => { }*/
/*event.onclose = async () => { }*/
/*event.onBeforRerender = async () => { }*/
/*event.onAfterRerender = async () => { }*/
let menu = [
include(splash),
include(apps),
include(settings),
];
window.dddd = menu[0];
let show = 0;
return _({
style:{
display: "flex",
height: "100%",
width: "100%",
flexDirection: "column",
}
}, [
_({
style:{
position:"relative",
width: "100%",
height: "100%",
}
},()=>{
menu[show].opts.render();
return menu[show].render({
style: {
height: "100%",
width: "100%"
}
});
}),
_({
style:{
height: "2rem",
width: "calc(100% - 2rem)",
padding: "1rem",
backgroundColor: "#fee",
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-evenly",
borderRadius:"2rem 2rem 0 0",
}
},()=>menu.map((m,i)=>{
return _({
event:{
click:()=>{
show = i;
render();
}
},
style:{
height:"1rem",
width:"1rem",
backgroundColor:show == i ? "red":"green"
}
},[]);
})
)
]);
}
export default new SWindow({ call, backgroundColor: "#dde" });