Custom Controls from all loaded assemblies will be automatically included in the OneJS runtime.
Custom Controls inherit from VisualElement
and are written entirely in C#. They’re sort of analogous to Web Components and are good for when you need something super reusable or performant.
OneJS comes with a few by default.
OneJS.Dom.Flipbook
OneJS.Dom.GradientRect
OneJS.Dom.Img
You can use them directly or check out the source as a reference for making your own.
Flipbook
Flipbook
can be used for animating spritesheets.
flipbook.tsx
import { render, h } from "preact"
import { ImageLoader } from "OneJS/Utils"
const lightningTexture = ImageLoader.Load(__dirname + "/resources/lightning.png")
const App = () => {
return <div>
<flipbook src={lightningTexture} num-per-row={8} count={32} interval={0.025} random-rotation={true} style={{ width: 100, height: 100 }} />
</div>
}
render(<App />, document.body)
GradientRect
GradientRect
is a simple container that uses a 4-corner gradient for the background color.
gradient-rect.tsx
import { render, h } from "preact"
import { parseColor as c } from "onejs/utils/color-parser"
const App = () => {
return <div>
<gradientrect colors={[c("#02BC23"), c("#48E025")]} style={{ width: 100, height: 100 }} />
<gradientrect colors={[c("red"), c("#00A0E6"), c("#00A0E6"), c("red")]} style={{ width: 100, height: 100 }} />
</div>
}
render(<App />, document.body)
Img
Img
allows you to load images with remote URLs.
img.tsx
import { render, h } from "preact"
const App = () => {
return <div class="h-full w-full">
<img src="https://cdn2.thecatapi.com/images/acv.jpg" />
</div>
}
render(<App />, document.body)