Skip to Content
DocumentationCORECustom 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)