@jsvision/ui / cover

Function: cover()

cover<V>(view): V

Defined in: ui/src/view/dsl/absolute.ts:89

Make a view cover its parent's whole content box as an out-of-flow overlay, and return the same view — standalone, no stack() wrapper. Sets position:'fill', merge-preserving every other layout prop; the box overlaps its siblings, reserves no flow space, and re-solves for free when the parent resizes.

Distinct from the Flex.fill shorthand: Flex.fill (a col/row prop) means grow: 1 — take a flex share of the flow; cover() sets position:'fill' — an overlay that leaves the flow entirely.

Type Parameters

V

V extends View

Parameters

view

V

The view to make an overlay.

Returns

V

The same view, for inline chaining.

Example

import { View, col, cover, type DrawContext } from '@jsvision/ui';

class Panel extends View {
  constructor(private readonly label: string) { super(); }
  draw(ctx: DrawContext) { ctx.fill(' ', ctx.color('window')); ctx.text(1, 0, this.label); }
}

// A canvas that fills its parent and overlaps whatever is behind it.
const canvasView = new Panel('canvas');
cover(canvasView);

// Contrast with the Flex.fill shorthand, which is grow:1 (a flow child), NOT an overlay:
const header = new Panel('header');
const body = new Panel('body');
col({ fill: true }, header, body); // fill → the column takes a flex share of its parent's flow
const overlayView = new Panel('overlay');
cover(overlayView); // cover → the view leaves the flow and covers the whole content box