Skip to content

@jsvision/ui / Placement

Interface: Placement

Defined in: ui/src/view/dsl/stack.ts:50

Where a stack layer sits within the shared overlay box.

Each axis is either 'fill' (span the whole extent) or 'start'/'center'/'end' (align a fixed size given by width/height). An omitted axis defaults to 'fill'. An optional hOffset/ vOffset insets the box away from its anchored edge. Build one with place or the centered/topRight/bottomRight/topLeft conveniences.

Example

ts
import { View, stack, place, okButton, type DrawContext } from '@jsvision/ui';

class Panel extends View {
  draw(ctx: DrawContext) { ctx.fill(' ', ctx.color('window')); }
}

// A 10×2 OK button, horizontally centered and pinned one cell above the bottom edge.
const body = new Panel();
const dialog = stack(body, place(okButton(), { h: 'center', v: 'end', vOffset: 1, width: 10, height: 2 }));

Properties

h?

optional h?: PlaceAxis

Defined in: ui/src/view/dsl/stack.ts:52

Horizontal mode (default 'fill').


height?

optional height?: number

Defined in: ui/src/view/dsl/stack.ts:58

Fixed height in cells for a non-fill vertical axis.


hOffset?

optional hOffset?: number

Defined in: ui/src/view/dsl/stack.ts:64

Horizontal inset in cells, applied after the start/center/end position: a positive value moves the layer away from its anchored edge (right for start/center, left for end), then the box is clamped to stay within the content box. Ignored on a 'fill' horizontal axis.


v?

optional v?: PlaceAxis

Defined in: ui/src/view/dsl/stack.ts:54

Vertical mode (default 'fill').


vOffset?

optional vOffset?: number

Defined in: ui/src/view/dsl/stack.ts:70

Vertical inset in cells, applied after the start/center/end position: a positive value moves the layer away from its anchored edge (down for start/center, up for end), then the box is clamped to stay within the content box. Ignored on a 'fill' vertical axis.


width?

optional width?: number

Defined in: ui/src/view/dsl/stack.ts:56

Fixed width in cells for a non-fill horizontal axis.