JSVision

Appearance

@jsvision/ui / col

Function: col() ​

col(...args): Group

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

Build a vertical flex container (direction: 'col') — children stack top to bottom. Pass an optional Flex props object first, then the child views.

A falsy child (null/undefined/false) is skipped, so col(showMenu && fixed(menu, 1), body) composes without a manual .add() dance.

Parameters ​

args ​

[Flex, ...Child[]] | Child[]

An optional Flex props object followed by child views (or just child views); a falsy child is skipped.

Returns ​

Group

A Group with layout.direction = 'col' and the (truthy) children added in order.

Example ​

ts
import { View, col, fixed, grow, 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 header of fixed height above a growing body; the status bar only when there is a message.
const header = new Panel('header');
const body = new Panel('body');
const status = new Panel('status');
const message: boolean = true; // e.g. driven by a signal in a real app
const page = col({ gap: 1 }, fixed(header, 3), grow(body), message && fixed(status, 1));