A framework with declarative syntax for developing UI for web apps
You can build your own reusable components or use built-in.
export class Feature extends View {
constructor({ heading, description, code }) {
super()
this.heading = heading
this.description = description
this.code = code
}
getBody() {
var { code, heading, description } = this
return (
new VStack([
heading
.setFont(Fonts.title.with({ weight: Weight.bold }))
.setOffset({ bottom: 20 }),
description
.setOffset({ bottom: 20 }),
code
])
.setPadding({ all: 10 })
)
}
}
With Bon UI it is very easy to create dynamic and interactive user interfaces. Declarative syntax helps you to navigate in code and to easily understand what it does.
class Header extends View {
getBody () {
return (
new VStack([
new Image("./Images/bon-ui.png", "Logo")
.setSize({ width: 200, height: 200 })
.setFitType(FitType.contain),
new Text("Bon UI")
.setFont(Fonts.largeTitle)
.setOffset({ top: 10, bottom: 10 })
.setForeground({ color: Colors.orange }),
new Text("A new framework\nfor developing web applications")
.setAlignment(Alignment.center)
])
.setAlignment({ horizontal: Alignment.center, vertical: Alignment.center })
.setMinSize({ height: viewportHeight(100) })
)
}
}
Each component has it's own state. When you update the state, the reconciler will automaticly update the DOM.
class App extends View {
getInitialState() {
return { counter: 1 }
}
getBody() {
return (
new VStack([
new Text("Increment the counter by clicking the button!")
.setOffset({ bottom: 20 }),
new Button(new Text("Counter: " + this.state.get("counter").toString()))
.setHandlerFor({ event: "click", handler: event => {
this.state.set("counter", this.state.get("counter") + 1)
}})
])
)
}
}
There is a Medium post that describes how to work with Bon UI. You can read it here
There is a folder Tutorials
in the root of this repository. Here you can find tutorials about how to work with Bon UI. Also they are avaliable on website with API documentation.
You can find the API documentation by visiting this website.
- Documentation is in development
- This is the alpha version of framework
- Please, contact us if you wish us to add something to the framework or found a bug