Sprites.Ui.Button

Buttons bound to reactive values.

Sprites.Ui.Button

Sprites.Ui.Button.Act Element

Sprites.Ui.Button.Act(command, ...content)

A button that runs a command when clicked. A command is a value with an onChange, a lens with no state of its own; the click pokes it, so its onChange reads snapshots and Sets values. Use it for an action that sets more than one value.

InputTypeDescription
commandSprites.Reactive.ValueA value with an onChange; the click pokes it to run the onChange.
contentString, Number, Sprites.Reactive.Value or FunctionThe label.

Returns the button element.

const draft = Sprites.Reactive.Value('');
const items = Sprites.Reactive.Value([]);
const add = Sprites.Reactive.Value(null, () => {
  const list = Sprites.Reactive.Freeze(items);
  const entry = Sprites.Reactive.Freeze(draft);
  Sprites.Reactive.Set(items, [...list, entry]);
  Sprites.Reactive.Set(draft, '');
});
Sprites.Ui.Input.Text(draft);
Sprites.Ui.Button.Act(add, 'Add');
Sprites.Reactive.Each(items, (item) => {
  Sprites.Ui.Dom.Tag('p', item);
});
One command sets two values: it appends the draft and clears it.

Sprites.Ui.Button.Decrement Element

Sprites.Ui.Button.Decrement(value, ...content)

A button that steps a number value down by one. Content is the label, and is required.

InputTypeDescription
valueSprites.Reactive.ValueThe number value to step down.
contentString, Number, Sprites.Reactive.Value or FunctionThe label. Required.

Returns the button element.

const count = Sprites.Reactive.Value(3);
Sprites.Ui.Button.Decrement(count, '-');
Sprites.Ui.Dom.Text('count = ', count);
Steps the number down by one.

Sprites.Ui.Button.Group.Column Element

Sprites.Ui.Button.Group.Column(build)

A column of buttons, top to bottom, in a wrapping div. The buttons sit flush with a hairline seam between them, and the group rounds its top and bottom corners. The styling assumes only buttons inside.

InputTypeDescription
buildFunctionBuilds the buttons in the group.

Returns the group element.

const tool = Sprites.Reactive.Value('move');
Sprites.Ui.Button.Group.Column(() => {
  Sprites.Ui.Button.Select(tool, () => {
    Sprites.Ui.Button.Option('move', 'Move');
    Sprites.Ui.Button.Option('draw', 'Draw');
  });
});
Sprites.Ui.Dom.Text('tool = ', tool);
A stacked selector; the top and bottom corners round.

Sprites.Ui.Button.Group.Grid Element

Sprites.Ui.Button.Group.Grid(columns, build)

A grid of buttons in a fixed number of columns, in a wrapping div. The buttons sit flush with a hairline seam between them, and the group rounds its four outer corners. The styling assumes only buttons inside.

InputTypeDescription
columnsNumber, Sprites.Reactive.Value or FunctionThe number of columns.
buildFunctionBuilds the buttons in the group.

Returns the group element.

const pick = Sprites.Reactive.Value(5);
Sprites.Ui.Button.Group.Grid(3, () => {
  Sprites.Ui.Button.Select(pick, () => {
    for (let i = 1; i <= 9; i++) {
      const label = String(i);
      Sprites.Ui.Button.Option(i, label);
    }
  });
});
Sprites.Ui.Dom.Text('pick = ', pick);
A three by three keypad; only the four corners round.

Sprites.Ui.Button.Group.Row Element

Sprites.Ui.Button.Group.Row(build)

A row of buttons, left to right, in a wrapping div. The buttons sit flush with a hairline seam between them, and the group rounds its left and right ends. The styling assumes only buttons inside.

InputTypeDescription
buildFunctionBuilds the buttons in the group.

Returns the group element.

const n = Sprites.Reactive.Value(0);
Sprites.Ui.Button.Group.Row(() => {
  Sprites.Ui.Button.Decrement(n, '-');
  Sprites.Ui.Button.Increment(n, '+');
});
Sprites.Ui.Dom.Text('n = ', n);
Grouped step buttons sit flush and share a value.

Sprites.Ui.Button.Increment Element

Sprites.Ui.Button.Increment(value, ...content)

A button that steps a number value up by one. Content is the label, and is required.

InputTypeDescription
valueSprites.Reactive.ValueThe number value to step up.
contentString, Number, Sprites.Reactive.Value or FunctionThe label. Required.

Returns the button element.

const count = Sprites.Reactive.Value(3);
Sprites.Ui.Button.Increment(count, '+');
Sprites.Ui.Dom.Text('count = ', count);
Steps the number up by one.

Sprites.Ui.Button.Insert Element

Sprites.Ui.Button.Insert(array, index, item, ...content)

A button that inserts an item into an array value at an index. The item may be a value or a function called at click time. The button is disabled while the index is out of range: below zero or past the end.

InputTypeDescription
arraySprites.Reactive.ValueThe array value to insert into.
indexNumber, Sprites.Reactive.Value or FunctionWhere to insert. The button disables while out of range.
itemAny or FunctionThe item, or a function called at click time.
contentString, Number, Sprites.Reactive.Value or FunctionThe label.

Returns the button element.

const rows = Sprites.Reactive.Value(['a', 'b']);
Sprites.Ui.Button.Insert(rows, 0, 'new', 'Insert at top');
Sprites.Reactive.Each(rows, (row) => {
  Sprites.Ui.Dom.Tag('p', row);
});
Inserts an item at the index.

Sprites.Ui.Button.Option Element

Sprites.Ui.Button.Option(optionValue, ...content)

One option of a Select. It shows as selected while the bound value equals optionValue, and a click sets the value to optionValue. Place it inside a Select, and usually a Group.

InputTypeDescription
optionValueAnyCompared with the bound value for the selected state, and written on click.
contentString, Number, Sprites.Reactive.Value or FunctionThe label.

Returns the button element.

const size = Sprites.Reactive.Value('M');
Sprites.Ui.Button.Group.Row(() => {
  Sprites.Ui.Button.Select(size, () => {
    Sprites.Ui.Button.Option('S', 'Small');
    Sprites.Ui.Button.Option('M', 'Medium');
    Sprites.Ui.Button.Option('L', 'Large');
  });
});
Sprites.Ui.Dom.Text('size = ', size);
Each option sets the value and shows selected when it matches.

Sprites.Ui.Button.Push Element

Sprites.Ui.Button.Push(array, item, ...content)

A button that appends an item to an array value. The item may be a value or a function called at click time, handy for a fresh object or to read a draft with Get.

InputTypeDescription
arraySprites.Reactive.ValueThe array value to append to.
itemAny or FunctionThe item, or a function called at click time.
contentString, Number, Sprites.Reactive.Value or FunctionThe label.

Returns the button element.

const rows = Sprites.Reactive.Value(['a', 'b']);
Sprites.Ui.Button.Push(rows, () => {
  return 'c';
}, 'Add row');
Sprites.Reactive.Each(rows, (row) => {
  Sprites.Ui.Dom.Tag('p', row);
});
Appends an item; a new paragraph appears.

Sprites.Ui.Button.Remove Element

Sprites.Ui.Button.Remove(array, index, ...content)

A button that removes the item at an index of an array value. The button is disabled while the index is out of range: below zero or past the last item.

InputTypeDescription
arraySprites.Reactive.ValueThe array value to remove from.
indexNumber, Sprites.Reactive.Value or FunctionThe index to remove. The button disables while out of range.
contentString, Number, Sprites.Reactive.Value or FunctionThe label.

Returns the button element.

const rows = Sprites.Reactive.Value(['a', 'b', 'c']);
Sprites.Ui.Button.Remove(rows, 0, 'Remove first');
Sprites.Reactive.Each(rows, (row) => {
  Sprites.Ui.Dom.Tag('p', row);
});
Removes the item at the index.

Sprites.Ui.Button.Secondary Void

Sprites.Ui.Button.Secondary()

Mark the current button secondary, called from inside its content. Primary is the default, so a plain button needs nothing.

Returns nothing.

const saved = Sprites.Reactive.Value(true);
Sprites.Ui.Button.SetValue(saved, false, () => {
  Sprites.Ui.Button.Secondary();
  Sprites.Ui.Dom.Text('Cancel');
});
Sprites.Ui.Dom.Text('saved = ', saved);
A secondary button that clears a value.

Sprites.Ui.Button.Select Any

Sprites.Ui.Button.Select(value, build)

A selection group. It puts the value in context for the Options built inside, so each Option shows selected while it matches and sets the value on click. Often placed inside a Group.

InputTypeDescription
valueSprites.Reactive.ValueThe selected value. The Options read it and set it on click.
buildFunctionBuilds the Options; may use If and Each.

Returns the result of build.

const size = Sprites.Reactive.Value('M');
Sprites.Ui.Button.Group.Row(() => {
  Sprites.Ui.Button.Select(size, () => {
    Sprites.Ui.Button.Option('S', 'Small');
    Sprites.Ui.Button.Option('M', 'Medium');
    Sprites.Ui.Button.Option('L', 'Large');
  });
});
Sprites.Ui.Dom.Text('size = ', size);
A segmented control that sets the shared value.

Sprites.Ui.Button.SetValue Element

Sprites.Ui.Button.SetValue(value, newValue, ...content)

A button that sets a value when clicked. newValue is a reactive value or a constant, never a function; to step from the old value use Increment, Decrement or Toggle, which freeze it and compose the next.

InputTypeDescription
valueSprites.Reactive.ValueThe value to set on click.
newValueAny or Sprites.Reactive.ValueThe value to set: a reactive value or a constant, never a function.
contentString, Number, Sprites.Reactive.Value or FunctionThe label.

Returns the button element.

const count = Sprites.Reactive.Value(5);
Sprites.Ui.Button.SetValue(count, 0, 'Reset');
Sprites.Ui.Dom.Text('count = ', count);
The button sets the value to zero.

Sprites.Ui.Button.Toggle Element

Sprites.Ui.Button.Toggle(value, ...content)

A button that flips a boolean value between true and false.

InputTypeDescription
valueSprites.Reactive.ValueThe boolean value to flip.
contentString, Number, Sprites.Reactive.Value or FunctionThe label.

Returns the button element.

const open = Sprites.Reactive.Value(false);
Sprites.Ui.Button.Toggle(open, 'Toggle');
Sprites.Ui.Dom.Text('open = ', open);
The button flips the boolean.