Sprites.Ui
The user interface core. Root binds a build to an element, and Enabled and Disabled set the ambient state of the controls below. The reactive values and structure live in Sprites.Reactive.
Sprites.Ui.Root Control
Sprites.Ui.Root(elementOrId, build)
Bind a piece of interface to an element on the page.
| Input | Type | Description |
|---|---|---|
elementOrId | Element or String | The host element, or the id of one on the page. |
build | Function | Builds the interface inside the host. |
Returns a control { el, close }: the host element and a close function that tears the interface down.
const name = Sprites.Reactive.Value('world');
Sprites.Ui.Root('app', () => {
Sprites.Ui.Input.Text(name);
Sprites.Ui.Dom.Text('Hello ', name);
});Sprites.Ui.Enabled Void
Sprites.Ui.Enabled(enabled, build)
Inject an ambient enabled state for the subtree that build creates. A button or an input below reads it and follows. A reactive flag turns the controls on and off as it changes.
| Input | Type | Description |
|---|---|---|
enabled | Boolean, Sprites.Reactive.Value or Function | The enabled flag for the subtree. |
build | Function | Builds the controls that follow the flag. |
Returns the result of build.
const on = Sprites.Reactive.Value(true);
const clicks = Sprites.Reactive.Value(0);
Sprites.Ui.Input.Checkbox(on);
Sprites.Ui.Enabled(on, () => {
Sprites.Ui.Button.Increment(clicks, 'Click me');
});Sprites.Ui.Disabled Void
Sprites.Ui.Disabled(disabled, build)
Inject an ambient disabled state for the subtree that build creates. It is the mirror of Enabled: a true flag turns the controls below off.
| Input | Type | Description |
|---|---|---|
disabled | Boolean, Sprites.Reactive.Value or Function | The disabled flag for the subtree. |
build | Function | Builds the controls that follow the flag. |
Returns the result of build.
const off = Sprites.Reactive.Value(true);
const clicks = Sprites.Reactive.Value(0);
Sprites.Ui.Input.Checkbox(off);
Sprites.Ui.Disabled(off, () => {
Sprites.Ui.Button.Increment(clicks, 'Click me');
});Sprites.Ui.Size Control
Sprites.Ui.Size(width, height, build)
A block that fills its parent and reports its own pixel size. It writes the width and height into reactive values as the element resizes, so the build inside can read the frame it has to work in. It stays a positioning context, so an overlay placed within lines up with it. Either value may be left out to track only the other.
| Input | Type | Description |
|---|---|---|
width | Sprites.Reactive.Value | The value the block writes with its pixel width, or left out to skip it. |
height | Sprites.Reactive.Value | The value the block writes with its pixel height, or left out to skip it. |
build | Function | Builds the content shown inside the block. |
Returns the block element.
const width = Sprites.Reactive.Value(0);
const height = Sprites.Reactive.Value(0);
Sprites.Ui.Size(width, height, () => {
Sprites.Ui.Dom.Text('width = ', width);
Sprites.Ui.Dom.Text(', height = ', height);
});