Sprites.Ui.Overlay

Layers of content above a region.

Sprites.Ui.Overlay

Sprites.Ui.Overlay.Container Element

Sprites.Ui.Overlay.Container(build)

Mark an area as an overlay region. Its background and layers fill this area, above its content. A Layer at any depth inside finds this region. A Layer with no Container fills the whole page, like a modal window.

InputTypeDescription
buildFunctionBuilds the area's own content.

Returns the container element.

const open = Sprites.Reactive.Value(false);
Sprites.Ui.Overlay.Container(() => {
  Sprites.Ui.Button.SetValue(open, true, 'Show');
  Sprites.Ui.Overlay.Layer(open, () => {
    Sprites.Ui.Content.Text('On top.');
  });
});
A button shows a layer, kept inside the region.

Sprites.Ui.Overlay.Free Element

Sprites.Ui.Overlay.Free(build)

Hoist content to a free host at the end of the body, kept in the current reactive scope and removed when that scope ends. Not modal: no background, no stack, and it never hides other content. Used by floating windows.

InputTypeDescription
buildFunctionBuilds the hoisted content.

Returns the host element.

const shown = Sprites.Reactive.Value(true);
Sprites.Ui.Input.Checkbox(shown);
Sprites.Reactive.If(shown, () => {
  Sprites.Ui.Overlay.Free(() => {
    Sprites.Ui.Content.Text('Free content, at the end of the body.');
  });
});
The checkbox adds and removes free content hoisted to the body.

Sprites.Ui.Overlay.Layer Void

Sprites.Ui.Overlay.Layer(visible, build)

Show content on the overlay while visible is true. The content is hoisted to the nearest Container background, or the window when there is none. Only the top layer of the stack shows.

InputTypeDescription
visibleBoolean, Sprites.Reactive.Value or FunctionShows the layer while true.
buildFunctionBuilds the layer content.

Returns nothing.

const first = Sprites.Reactive.Value(false);
const second = Sprites.Reactive.Value(false);
Sprites.Ui.Overlay.Container(() => {
  Sprites.Ui.Button.SetValue(first, true, 'Show');
  Sprites.Ui.Overlay.Layer(first, () => {
    Sprites.Ui.Button.SetValue(second, true, 'More');
  });
  Sprites.Ui.Overlay.Layer(second, () => {
    Sprites.Ui.Content.Text('Second layer, on top.');
  });
});
The first layer's button shows a second layer on top.