JSVision

Appearance

@jsvision/ui / Flex

Type Alias: Flex ​

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

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

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

Flex-grow weight — shorthand for size: { kind:'fr', weight }.

Example ​

ts
import { col, row } from '@jsvision/ui';

// 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 screen = row(layout, col({ fixed: 20 }, sidebar), col({ grow: 1 }, main));