@jimka/typescript-ui

Appearance

Column ​

Column divides the container width equally among all children and places them left-to-right with a configurable gap. Unlike HBox (which honours each child's preferred width), Column allocates equal slots regardless.

Despite the name, Column lays children out horizontally. The name describes the column of equally sized slots that result.

+--------+--------+--------+
|  [A]   |  [B]   |  [C]   |   ← 1/N width each
+--------+--------+--------+
   each child gets the same width

Usage ​

typescript
import { Component } from '@jimka/typescript-ui/core';
import { Column } from '@jimka/typescript-ui/layout';
import { Button } from '@jimka/typescript-ui/component/button';
const tabs = Component();
tabs.setLayoutManager(Column({ gap: 2 }));

tabs.addComponent(Button('Files'));
tabs.addComponent(Button('Edit'));
tabs.addComponent(Button('Help'));

ColumnOptions accepts gap and stretching declaratively; the setGap / setStretching setters still work for runtime updates.

Per-child constraints ​

LayoutConstraints — fill and anchor apply when a child's preferred size is smaller than its slot.

Common methods ​

MethodPurpose
setGap(px)Horizontal gap between children.
setStretching(boolean)When true (default), every child fills the full row height. When false, children use their preferred heights and are baseline-aligned within the row.

Baseline alignment ​

By default, Column stretches every child to fill the row's full height, so baselines are irrelevant. Call setStretching(false) to opt into the same baseline-aware placement that HBox uses: text-bearing children line up by their inner-text baseline, and graphical children (checkboxes, progress bars, etc.) center on the row's text line.

typescript
const layout = Column({ stretching: false }); // baseline-align children

When to use it ​

  • A horizontal strip of equally sized buttons or tabs.
  • A grid where you only need one row of equal-width cells.

For preferred-width-driven sequencing, use HBox.

See also ​