JSVision

Appearance

@jsvision/ui / stack

Function: stack() ​

stack(...args): Group

Defined in: ui/src/view/dsl.ts:311

Build a z-overlay stack: every layer shares the same box and paints back-to-front (a later layer draws over an earlier one). An untagged layer (or one placed to 'fill' on both axes) fills the whole box; a centered fixed box re-centers itself; a corner/edge layer (via topRight etc.) pins to its edge. Fill and centered layers re-solve lag-free on resize; corner/edge layers settle one frame later.

Pass an optional Flex props object first (e.g. a background), then the layers. The stack takes a flex share of 1 by default, so a bare stack(...) fills its parent.

Note: a centered layer centers against the stack's full box, not its content box — keep a stack's padding at 0 for a true center.

Parameters ​

args ​

View[] | [Flex, ...View[]]

An optional Flex props object followed by the layer views (back-to-front).

Returns ​

Group

A Group overlay containing the wired layers.

Example ​

ts
import { stack, centered, topRight } from '@jsvision/ui';

// A full-box canvas with a centered dialog and a badge pinned to the top-right corner.
const screen = stack({ background: 'desktop' }, canvas, centered(dialog, 40, 12), topRight(badge, 5, 1));