0.6.4 • Published 11 months ago

@protorians/widgets v0.6.4

Weekly downloads
-
License
ISC
Repository
github
Last release
11 months ago

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>

Coming Soon...

0.1.8-beta.0

1 year ago

0.1.10

1 year ago

0.1.11

1 year ago

0.1.12

1 year ago

0.6.6

11 months ago

0.1.13

1 year ago

0.1.14

1 year ago

0.6.8

11 months ago

0.3.0

1 year ago

0.1.8

1 year ago

0.3.5

1 year ago

0.1.9

1 year ago

0.5.0

12 months ago

0.3.2

1 year ago

0.3.1

1 year ago

0.1.3

1 year ago

0.1.6

1 year ago

0.5.1

12 months ago

0.3.3

1 year ago

0.1.5

1 year ago

0.1.7-beta.1

1 year ago

0.1.7-beta.2

1 year ago

0.1.7-beta.3

1 year ago

0.1.7-beta.4

1 year ago

0.3.9

1 year ago

0.1.7-beta.0

1 year ago

0.3.11

1 year ago

0.3.10

1 year ago

0.1.20

1 year ago

0.1.21

1 year ago

0.1.22

1 year ago

0.1.23

1 year ago

0.1.24

1 year ago

0.6.3

11 months ago

0.1.16

1 year ago

0.6.2

11 months ago

0.1.17

1 year ago

0.6.5

11 months ago

0.1.18

1 year ago

0.6.4

11 months ago

0.1.19

1 year ago

0.4.0

12 months ago

0.0.14

1 year ago

0.0.13

1 year ago

0.0.10

2 years ago

0.0.11

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.4-beta.13

2 years ago

0.0.4-beta.6

2 years ago

0.0.4-beta.7

2 years ago

0.0.4-beta.5

2 years ago

0.0.3

2 years ago

0.0.4-beta.0

2 years ago

0.0.4-beta.2

2 years ago

0.0.3-beta.2

2 years ago

0.0.4-beta.1

2 years ago

0.0.3-beta.3

2 years ago

0.0.4-beta.3

2 years ago

0.0.3-beta.1

2 years ago

0.0.3-beta.4

2 years ago

0.0.3-beta.5

2 years ago

0.0.2-beta.7

2 years ago

0.0.2-beta.8

2 years ago

0.0.2-beta.9

2 years ago

0.0.2-beta.6

2 years ago

0.0.2-beta.3

2 years ago

0.0.2-beta.1

2 years ago

0.0.2-beta.2

2 years ago

0.0.1-alpha.11

2 years ago

0.0.1-alpha.10

2 years ago

0.0.1-alpha.8

2 years ago

0.0.1-alpha.9

2 years ago

0.0.1-alpha.6

2 years ago

0.0.1-alpha.7

2 years ago

0.0.1-alpha.5

2 years ago

0.0.1-alpha.2

2 years ago

0.0.1-alpha.3

2 years ago

0.0.1-alpha.1

2 years ago

0.0.1

2 years ago