JSVision

Appearance

@jsvision/ui / Flex

Type Alias: Flex ​

Flex = Omit<LayoutProps, "direction"> & object

Defined in: ui/src/view/dsl/flex.ts:48

Container props for col/row: every LayoutProps field except direction (the builder sets that), plus size shorthands and a background role.

grow/fixed/fill are shorthands for the size token — grow: n → { kind:'fr', weight:n }, fixed: n → { kind:'fixed', cells:n }, fill: true → { kind:'fr', weight:1 }. An explicit size always wins over the shorthands. background sets the group's fill role (it is not a layout prop). All fields are optional.

Type Declaration ​

background? ​

optional background?: ThemeRoleName

Theme role filled behind the children before they paint.

fill? ​

optional fill?: boolean

Take a flex share of 1 — shorthand for size: { kind:'fr', weight:1 }.

fixed? ​

optional fixed?: number

Fixed cell count — shorthand for size: { kind:'fixed', cells }.

grow? ​

optional grow?: number | { min?: number; weight: number; }

Flex-grow weight — shorthand for size: { kind:'fr', weight }. The object form adds a min cell floor: { weight, min } → { kind:'fr', weight, min } (the box never solves below min).

Example ​

ts
import { View, col, row, 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 fixed-width sidebar next to a growing main area, with 1 cell of gap and a filled background.
const layout: import('@jsvision/ui').Flex = { gap: 1, background: 'desktop' };
const sidebar = new Panel('sidebar');
const main = new Panel('main');
const screen = row(layout, col({ fixed: 20 }, sidebar), col({ grow: 1 }, main));