67 lines
1.1 KiB
Markdown
67 lines
1.1 KiB
Markdown
# forge
|
|
|
|
Example:
|
|
|
|
```tsx
|
|
import { define } from "forge"
|
|
|
|
export const Button = define("button", {
|
|
layout: {
|
|
padding: 20,
|
|
},
|
|
look: {
|
|
background: "blue",
|
|
},
|
|
variants: {
|
|
kind: {
|
|
danger: { look: { background: "red" } },
|
|
warning: { look: { background: "yellow" } },
|
|
}
|
|
},
|
|
})
|
|
|
|
// Usage
|
|
<Button>Click me</Button>
|
|
<Button kind="danger">Click me carefully</Button>
|
|
<Button kind="warning">Click me?</Button>
|
|
|
|
export const Profile = define("div", {
|
|
layout: {
|
|
padding: 50,
|
|
},
|
|
look: {
|
|
background: "red",
|
|
},
|
|
|
|
parts: {
|
|
header: { layout: { display: "flex" } },
|
|
avatar: { layout: { width: 50 } },
|
|
bio: { look: { color: "gray" } },
|
|
},
|
|
|
|
variants: {
|
|
size: {
|
|
small: {
|
|
parts: { avatar: { layout: { width: 20 }}}
|
|
}
|
|
}
|
|
},
|
|
|
|
render({ props, parts: { root, header, avatar, bio } }) {
|
|
return (
|
|
<root>
|
|
<header>
|
|
<avatar src={props.pic} />
|
|
<bio>{props.bio}</bio>
|
|
</header>
|
|
</root>
|
|
)
|
|
},
|
|
})
|
|
|
|
// Usage:
|
|
import { Profile } from './whatever'
|
|
|
|
<Profile pic={user.pic} bio={user.bio} />
|
|
```
|