Simo Framework

@import[components/simoside.html]

Create user interfaces from components

Simo lets you build user interfaces out of individual pieces called components. Create your own Simo components like boxcard, userpic, userinfo, btnlike, and usercard. Then combine them into entire screens, pages, components, and apps.

Run

userCard.html

partial.oncreated('.simocomponent.simoheader', function () { thisid.setdark = function () { thisid.editor = ace.edit("editor"); thisid.editor.setTheme(document.documentElement.classList.contains("dark") ? "ace/theme/twilight" : "ace/theme/chrome"); thisid.editor.session.setMode("ace/mode/html"); } thisid.setdark(); $('#themeToggle').click(() => { thisid.setdark(); }) thisid.editor.setValue(`  <boxcard--->  <userpic--- src="./imgs/mohsen.png"></userpic--->  <userinfo---> <fullname--->Mohsen Kheybari</fullname---> <posation--->Main Developer</posation---> </userinfo--->  <btnlike---></btnlike---> </boxcard---> `.replaceAll('///', '').replaceAll('---', ''), -1) $('#output').html(`<h5>Click the "Run" button to view. </h5>`) })

userCard.html

"Please wait a moment..."

How does it work?

create boxcard.html

boxcard.html

@norender

@contenttag[??

]

create userpic.html

userpic.html

@norender

create userinfo.html

userinfo.html

@norender

@---tag[fullname??your name]

@---tag[posation??your job position]

create btnlike.html

btnlike.html

@norender

Adding to the render.js File :

To avoid the need for using @import, you can add the created tags in the render.js file.

render.js

@norender render.componentstag.push({ name: "boxcar---d", path: "./boxcard.html" }); render.componentstag.push({ name: "btnl---ike", path: "./btnlike.html" }); render.componentstag.push({ name: "useri---nfo", path: "./userinfo.html" }); render.componentstag.push({ name: "userp---ic", path: "./userpic.html" });

The work is done! Now you can use these tags anywhere in your application.

userCard.html

@norender

Mohsen Kheybari Main Developer

index.html

Mohsen Kheybari Main Developer