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 composes values and Sets them. Use it for an action that sets more than one value.

Returns the button element.

const draft = Sprites.Reactive.Value('');
const items = Sprites.Reactive.Value([]);
const add = Sprites.Reactive.Reverse(() => {
  const grown = Sprites.Array.Append(items, draft);
  Sprites.Reactive.Set(items, grown);
  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);
});

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.

Returns the button element.

const count = Sprites.Reactive.Value(3);
Sprites.Ui.Button.Decrement(count, '-');
Sprites.Ui.Dom.Text('count = ', count);

Sprites.Ui.Button.Group Object

The button group namespace. A group is a div that holds buttons flush, with a hairline seam between them and its outer corners rounded to its own silhouette. It clips to its rounded box, so the rounding falls in the right place in every layout. Row lays the buttons left to right, Column top to bottom, and Grid in a fixed number of columns. The styling assumes only buttons inside.

const n = Sprites.Reactive.Value(0);
Sprites.Ui.Button.Group.Row(() => {
  Sprites.Ui.Button.Decrement(n, '-');
  Sprites.Ui.Button.Increment(n, '+');
});
Sprites.Ui.Button.Group.Column(() => {
  Sprites.Ui.Button.Increment(n, 'up');
  Sprites.Ui.Button.Decrement(n, 'down');
});
Sprites.Ui.Dom.Text('n = ', n);

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.

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);

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.

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);

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.

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);

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.

Returns the button element.

const count = Sprites.Reactive.Value(3);
Sprites.Ui.Button.Increment(count, '+');
Sprites.Ui.Dom.Text('count = ', count);

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.

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);
});

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.

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);

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.

Returns the button element.

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

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.

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);
});

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);

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.

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);

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.

Returns the button element.

const count = Sprites.Reactive.Value(5);
Sprites.Ui.Button.SetValue(count, 0, 'Reset');
Sprites.Ui.Dom.Text('count = ', count);

Sprites.Ui.Button.Toggle Element

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

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

Returns the button element.

const open = Sprites.Reactive.Value(false);
Sprites.Ui.Button.Toggle(open, 'Toggle');
Sprites.Ui.Dom.Text('open = ', open);