@protorians/widgets
v0.0.14
Published
Create your web user interfaces with widgets
Downloads
260
Readme
Protorians Widgets
Create your web user interfaces with widgets
Syntax
import {Widget, H1, H4, Paragraph, Component} from "@protorians/widgets"
import {IWidget} from "./widget";
/**
* Define Type
*/
type MyType = {
fullname: string;
}
/**
* Create widget
*/
const myWidget = ({fullname}: MyType): IWidget<ICommonAttributes, HTMLElement> => Widget({
classname: "my-widget",
style: {
padding: "1rem",
width: "calc( 100% - 2rem )"
},
children: [
H1('Protorians Widget'),
Paragraph(`Welcome to the futur ${fullname}`)
],
signal: {
mount: (context) => console.log('My widget is mounted with context :', context)
}
})
/**
* Define component
*/
Component<MyType>('MyWidget', myWidget)
/**
* Or Use in other widget
*/
const otherWidget = () => Widget({
children:[
H4('Home'),
myWidget({fullname: 'Carter'})
]
})
Use in HTML page
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Page</title>
</head>
<body>
...
<my-widget fullanme="Ian"></my-widget>
...
</body>
</html>