Custom Controls

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)