View#

View is the basic layout container. It maps to UI Toolkit's VisualElement.

Import#

import { View } from "onejs-react"

Basic Usage#

<View style={{ padding: 20, backgroundColor: "#1a1a1a" }}>
    <Label text="Content inside a View" />
</View>

Props#

Prop	Type	Description
`style`	`ViewStyle`	Inline styles
`className`	`string`	USS class name(s)
`name`	`string`	Element name (USS `#id` selectors + Debugger label)
`children`	`ReactNode`	Child elements
`onClick`	`(e) => void`	Click handler
`onPointerDown`	`(e) => void`	Pointer down handler
`onPointerUp`	`(e) => void`	Pointer up handler
`onPointerMove`	`(e) => void`	Pointer move handler
`onPointerEnter`	`(e) => void`	Pointer enter handler
`onPointerLeave`	`(e) => void`	Pointer leave handler
`disabled`	`boolean`	Disable the element: applies `:disabled` and blocks input and focus for it and its children
`focusable`	`boolean`	Whether the element can take keyboard and gamepad focus
`pickingMode`	`"Position"`, `"Ignore"`	`"Ignore"` lets pointer events pass through to what is underneath
`onGenerateVisualContent`	`(mgc) => void`	Custom drawing, see Vector Drawing

Every component accepts these props. For the full event list see Events.

Flexbox Layout#

View uses flexbox by default. Column direction is the default:

// Vertical stack (default)
<View>
    <Label text="First" style={{ marginBottom: 10 }} />
    <Label text="Second" style={{ marginBottom: 10 }} />
    <Label text="Third" />
</View>

// Horizontal row
<View style={{ flexDirection: "row" }}>
    <Button text="One" style={{ marginRight: 10 }} />
    <Button text="Two" style={{ marginRight: 10 }} />
    <Button text="Three" />
</View>

Note: USS doesn't support the gap property. Use margins on child elements instead.

Naming Elements#

The name prop maps to UI Toolkit's VisualElement.name. It's available on every component (View, Button, Label, etc.) and is handy for two things:

USS #id selectors: target an element by name, just like a CSS ID selector.
Debugging: the UI Toolkit Debugger window shows the name (e.g. VisualElement#sidebar) instead of the bare type.

<View name="sidebar" className="panel">
    <Label text="Inventory" />
</View>

/* In a .uss stylesheet */
#sidebar {
    width: 240px;
}

Names need not be unique, but since # selectors match by name, prefer unique names for elements you select on.

Common Layouts#

Centered Content#

<View style={{
    height: "100%",
    justifyContent: "center",
    alignItems: "center",
}}>
    <Label text="Centered" />
</View>

Space Between#

<View style={{
    flexDirection: "row",
    justifyContent: "space-between",
    padding: 20,
}}>
    <Label text="Left" />
    <Label text="Right" />
</View>

Flexible Children#

<View style={{ flexDirection: "row", height: 100 }}>
    <View style={{ flexGrow: 1, backgroundColor: "#333" }} />
    <View style={{ flexGrow: 2, backgroundColor: "#555" }} />
    <View style={{ flexGrow: 1, backgroundColor: "#777" }} />
</View>

Absolute Positioning#

<View style={{ position: "relative", height: 200 }}>
    <View style={{
        position: "absolute",
        top: 10,
        right: 10,
        width: 50,
        height: 50,
        backgroundColor: "red",
    }} />
</View>

Interactive View#

function ClickableCard() {
    const [active, setActive] = useState(false)

    return (
        <View
            style={{
                padding: 20,
                backgroundColor: active ? "#0066cc" : "#333",
                borderRadius: 8,
            }}
            onClick={() => setActive(!active)}
        >
            <Label text={active ? "Active" : "Click me"} />
        </View>
    )
}