@jsvision/ui / LayoutProps

Interface: LayoutProps

Defined in: ui/src/layout/types.ts:55

Layout properties of a box; all optional, with defaults matching CSS flexbox: direction:'row', size:'auto', justify:'start', align:'stretch', gap:0, padding:0.

Properties

align?

optional align?: Align

Defined in: ui/src/layout/types.ts:63

Cross-axis alignment (default 'stretch').

---

direction?

optional direction?: Direction

Defined in: ui/src/layout/types.ts:57

Container main axis (default 'row').

---

gap?

optional gap?: number

Defined in: ui/src/layout/types.ts:65

Integer cells between adjacent children (default 0).

---

justify?

optional justify?: Justify

Defined in: ui/src/layout/types.ts:61

Main-axis distribution of leftover space (default 'start').

---

padding?

optional padding?: number | Padding

Defined in: ui/src/layout/types.ts:67

Content inset; a number applies to all sides (default 0).

---

position?

optional position?: "flow" | "absolute" | "fill"

Defined in: ui/src/layout/types.ts:76

Placement mode (default 'flow'). 'flow' joins the parent's flex flow; 'absolute' removes the box from flow and places it at rect within the parent's content box — overlapping siblings freely and reserving no flow space (the CSS position:absolute analogy); 'fill' is a self-sizing overlay that takes the parent's whole content box, overlaps siblings, reserves no flow space, and is excluded from the parent's intrinsic size — so it needs no rect and re-solves for free when the parent resizes. Several 'fill' children stack in the same box.

---

rect?

optional rect?: Rect

Defined in: ui/src/layout/types.ts:82

position:'absolute' only — the parent-content-relative rect in cells (each side clamped to a non-negative integer). Ignored for 'flow' and 'fill' (a 'fill' box always takes the full content box); absent on an absolute box ⇒ a degenerate zero rect (no throw).

---

size?

optional size?: Size

Defined in: ui/src/layout/types.ts:59

Size within the parent's main axis (default { kind:'auto' }).