Elements
This page lists the elements an Orb's screen is made of and the values they take.
The elements
| Element | As a base Orb uses it |
|---|---|
os-box | <os-box role="bubble" params={{ surface: "sunken", padX: 3, padY: 2, radius: "lg" }}> |
os-text | <os-text role="caption" t="list.none" params={{ color: "muted" }} /> |
os-icon | — |
os-image | — |
os-button | <os-button mode="solid" t="save" disabled={!data} onPress={save} /> |
os-input | <os-input mode="box" type="password" value={v} tPlaceholder="secrets.value" onValue={(e) => setV(e.value)} /> |
os-textarea | <os-textarea rows={3} value={about} onValue={(e) => setAbout(e.value)} /> |
os-toggle | — |
os-select | <os-select mode="segmented" value={lang} options={JSON.stringify(Object.entries(langs))} onValue={(e) => setLang(e.value)} /> |
os-slider | <os-slider value={c} min={0} max={255} step={1} onValue={(e) => setC(Number(e.value))} /> |
os-avatar | — |
os-badge | <os-badge mode="label" t={l.signed_in ? "logins.in" : "logins.out"} /> |
os-progress | — |
os-card | <os-card mode="flat" params={{ padX: 4, padY: 3 }}> |
os-header | — |
os-stack | <os-stack axis="row" gap={4} align="center"> |
os-grid | <os-grid columns={columns} gap={2}> |
os-list | <os-list gap={1}> |
os-panel | — |
os-sheet | <os-sheet> |
os-split | <os-split> with two os-scroll children: a list on the left, the picked pane on the right |
os-scroll | <os-scroll anchor="end" gap={5} params={{ padX: 4, padY: 4 }}> |
os-slot | — |
The platform hands the Orb the list of allowed elements before its code runs. Any other tag can be created, but inserting it throws.
Values
| Value | What it is |
|---|---|
mode | The element's variant. Base Orbs use icon, solid, outline, ghost, link (button), box (input), segmented (select), flat (card), label (badge). |
params | The element's parameters, as an object: padX, padY, color, weight, surface, radius, border, font, size in the base Orbs. |
tokens | Tokens given at this node for what is under it. |
role | title, label, caption, field, bubble in the base Orbs. |
t | A key of the Orb's string table, drawn in the person's language. |
args | Values for the {…} holes in the t string. |
tPlaceholder | The placeholder, by key. |
label | Literal text. |
value, placeholder, icon, disabled, selected, loading | As named. |
min, max, step | A slider's range. |
options | JSON [[value, label] …]; a label "t:key" is one of the Orb's words. |
axis | "row" or "column". |
gap | A number of the spacing base, or a length. |
align | start, center, end in the base Orbs. |
anchor | "end": a scroll held at its end while it grows, unless scrolled back. |
mark | A name for this element, which a scroll around it can go to. |
to | On os-scroll: the name of a marked element inside it. Each time to changes, the platform brings that element into the middle and lights it a moment; without the movement when the person asks for less motion. |
columns | A grid's number of columns. |
type | "password": an input's words hidden. |
rows | A textarea's number of lines. |
menu | Its own context-menu items, JSON [[id, label] …]; picked, onMenu gets { item }. |
action, with | The Orb's action it carries and its arguments; see Calling the space. |
private | Left out, with what is under it, of what agents read of the screen. |
onPress | Pressed. |
onValue | { value }, the new value. |
onEnter | { value }, Enter pressed in an input. |
A context menu, as the chat Orb puts one on a message:
<os-box
role="bubble"
menu={JSON.stringify([["delete", "t:message.delete"]])}
onMenu={(e) => e.item === "delete" && remove(m.id)}
>
params and tokens
params and tokens are set as objects. An object equal to the last one set is not sent again. Values set on a node reach what is below it. os.catalogue lists every element, parameter and token with its kind and range.