Sprites.Ui.Overlay

Layers of content above a region.

Sprites.Ui.Overlay

`Sprites.Ui.Overlay.Container` Element

Sprites.Ui.Overlay.Container(name, build)

Mark an area as an overlay region of the given name. Its background and layers fill this area, above its content. A Layer of the same name at any depth inside finds this region, so regions of different names never capture each other. A Layer with no Container of its name fills the whole page, like a modal window.

Input	Type	Description
`name`	String	Names the region, so only Layers of the same name land in it.
`build`	Function	Builds the area's own content.

Returns the container element.

Code

const open = Sprites.Reactive.Value(false);
Sprites.Ui.Overlay.Container('note', () => {
  Sprites.Ui.Button.SetValue(open, true, 'Show');
  Sprites.Ui.Overlay.Layer('note', open, () => {
    Sprites.Ui.Content.Text('On top.');
  });
});

Preview

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.

Input	Type	Description
`build`	Function	Builds the hoisted content.

Returns the host element.

Code

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

Preview

The checkbox adds and removes free content hoisted to the body.

`Sprites.Ui.Overlay.Layer` Void

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

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

Input	Type	Description
`name`	String	Names the region this layer lands in, matching a Container of the same name.
`visible`	Boolean, Sprites.Reactive.Value or Function	Shows the layer while true.
`build`	Function	Builds the layer content.

Returns nothing.

Code

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

Preview

The first layer's button shows a second layer on top.