Sprites.Ui.Dom

Build elements, attributes, text, classes, styles and events.

Sprites.Ui.Dom

Sprites.Ui.Dom.Attribute Void

Sprites.Ui.Dom.Attribute(name, value)

Set an attribute from a value, a reader function, or a constant. For class and style, prefer Class and Style, which compose.

InputTypeDescription
nameStringThe attribute name. For class and style, prefer Class and Style.
valueAny, Sprites.Reactive.Value or FunctionThe attribute value, reactive or constant.

Returns nothing.

const off = Sprites.Reactive.Value(false);
Sprites.Ui.Input.Checkbox(off);
Sprites.Ui.Dom.Tag('button', () => {
  Sprites.Ui.Dom.Attribute('disabled', off);
  Sprites.Ui.Dom.Text('Save');
});
Tick the box to set the button's disabled attribute.

Sprites.Ui.Dom.Class Void

Sprites.Ui.Dom.Class(...parts)

Add classes to the current element. Parts are strings, numbers, values or readers, joined with spaces. It may be used more than once, and inside If or Each on the parent, so logic can choose which classes apply. Each call is removed when its scope ends.

InputTypeDescription
partsString, Number, Sprites.Reactive.Value or FunctionClass names, joined with spaces, empties dropped.

Returns nothing.

const wide = Sprites.Reactive.Value(true);
Sprites.Ui.Input.Checkbox(wide);
Sprites.Ui.Dom.Tag('button', () => {
  Sprites.Ui.Dom.Class(() => {
    return Sprites.Reactive.Get(wide) ? 'stretch' : '';
  });
  Sprites.Ui.Dom.Text('Wide');
});
The checkbox adds or drops the stretch class.

Sprites.Ui.Dom.Event Void

Sprites.Ui.Dom.Event(name, handler)

Listen for a DOM event. A form control passes its latest value to the handler.

InputTypeDescription
nameStringThe event name, with or without the on prefix.
handlerFunctionRuns in the reverse phase, then both heaps flush. A form control passes its latest value.

Returns nothing.

const n = Sprites.Reactive.Value(0);
Sprites.Ui.Dom.Tag('button', () => {
  Sprites.Ui.Dom.Event('onclick', () => {
    const v = Sprites.Reactive.Freeze(n);
    Sprites.Reactive.Set(n, v + 1);
  });
  Sprites.Ui.Dom.Text('Clicked ', n);
});
Each click runs the handler and bumps the count.

Sprites.Ui.Dom.Style Void

Sprites.Ui.Dom.Style(name, ...parts)

Set one style property on the current element to its parts concatenated. Like Class it may be used more than once, one property each, and inside If or Each on the parent. A later call for the same property wins while it lasts.

InputTypeDescription
nameStringThe style property.
partsString, Number, Sprites.Reactive.Value or FunctionThe value pieces, concatenated.

Returns nothing.

const size = Sprites.Reactive.Value(16);
Sprites.Ui.Input.Slider(size, 10, 40);
Sprites.Ui.Dom.Tag('span', () => {
  Sprites.Ui.Dom.Style('font-size', size, 'px');
  Sprites.Ui.Dom.Text('Resize me');
});
The slider drives the text's font size.

Sprites.Ui.Dom.Tag Element

Sprites.Ui.Dom.Tag(name, ...content)

Add an element and build its content. One build closure runs as it is; a string, a number or a value (or several) become text.

InputTypeDescription
nameStringThe tag name.
contentFunction, String, Number or Sprites.Reactive.ValueOne build closure, or text parts.

Returns the created element.

const n = Sprites.Reactive.Value(0);
Sprites.Ui.Dom.Tag('button', () => {
  Sprites.Ui.Dom.Event('onclick', () => {
    const v = Sprites.Reactive.Freeze(n);
    Sprites.Reactive.Set(n, v + 1);
  });
  Sprites.Ui.Dom.Text('Tapped ', n);
});
A button element that counts its own taps.

Sprites.Ui.Dom.Text Node

Sprites.Ui.Dom.Text(...parts)

Add a text node from one or more parts, joined. Each part is a string, a number, any value, a reactive value or a reader, so there is no need to cast to a string. It stays live while any part is reactive.

InputTypeDescription
partsString, Number, Sprites.Reactive.Value or FunctionParts joined into the text node. Stays live while any part is reactive.

Returns the text node.

const name = Sprites.Reactive.Value('world');
Sprites.Ui.Input.Text(name);
Sprites.Ui.Dom.Text('Hello ', name);
A live text node mixing a string and a value.