Sprites.Ui.Layout

Rows, columns, grids and stretch.

Sprites.Ui.Layout

Sprites.Ui.Layout.Column Element

Sprites.Ui.Layout.Column(build)

A vertical flow.

InputTypeDescription
buildFunctionBuilds the column's children.

Returns the column element.

Sprites.Ui.Layout.Row(() => {
  Sprites.Ui.Layout.Column(() => {
    Sprites.Ui.Dom.Tag('strong', 'Left');
    Sprites.Ui.Dom.Tag('p', 'First line.');
    Sprites.Ui.Dom.Tag('p', 'Second line.');
  });
  Sprites.Ui.Layout.Column(() => {
    Sprites.Ui.Dom.Tag('strong', 'Right');
    Sprites.Ui.Dom.Tag('p', 'Only line.');
  });
});
Two columns in a row, each with a title and its text.

Sprites.Ui.Layout.Grid Element

Sprites.Ui.Layout.Grid(columns, build)

An even grid, with a fixed column count or an auto fit.

InputTypeDescription
columnsNumberOptional. A fixed column count; leave it out for an auto fit.
buildFunctionBuilds the grid's children.

Returns the grid element.

const count = Sprites.Reactive.Value(6);
Sprites.Ui.Layout.Grid(3, () => {
  Sprites.Reactive.Repeat(count, (i) => {
    Sprites.Ui.Dom.Tag('button', i + 1);
  });
});
Sprites.Ui.Dom.Text('Grid cells:');
Sprites.Ui.Input.Number(count, 1, 9);
Change the count and the grid grows.

Sprites.Ui.Layout.Row Element

Sprites.Ui.Layout.Row(build)

A horizontal flow.

InputTypeDescription
buildFunctionBuilds the row's children.

Returns the row element.

const n = Sprites.Reactive.Value(0);
Sprites.Ui.Layout.Row(() => {
  Sprites.Ui.Button.Decrement(n, '-');
  Sprites.Ui.Dom.Text('n = ', n);
  Sprites.Ui.Button.Increment(n, '+');
});
A row with a decrement, the count, and an increment.

Sprites.Ui.Layout.Stretch Element

Sprites.Ui.Layout.Stretch(proportion, build)

A child that eats the remaining space, weighted by proportion.

InputTypeDescription
proportionNumberThe weight of its share against other stretches.
buildFunctionBuilds the stretch's content.

Returns the stretch element.

const query = Sprites.Reactive.Value('Search');
Sprites.Ui.Layout.Row(() => {
  Sprites.Ui.Layout.Stretch(1, () => {
    Sprites.Ui.Input.Text(query);
  });
  Sprites.Ui.Dom.Tag('button', 'Go');
});
The text field eats the space beside a fixed button.