@jimka/typescript-ui

Appearance

HBox ​

HBox places children in a single horizontal row, using each child's preferred width. An optional stretching mode expands children vertically to fill the row's height.

+--------------------------+
| [A] [B]  [C  ] [D] [E]   |
+--------------------------+
   children in a row, configurable spacing

Usage ​

typescript
import { Component } from '@jimka/typescript-ui/core';
import { HBox } from '@jimka/typescript-ui/layout';
import { Button } from '@jimka/typescript-ui/component/button';
const toolbar = Component();
toolbar.setLayoutManager(HBox({ spacing: 8 }));

toolbar.addComponent(Button('Cut'));
toolbar.addComponent(Button('Copy'));
toolbar.addComponent(Button('Paste'));

The same options (HBoxOptions) can be passed to set spacing and stretching declaratively. The legacy setSpacing / setStretching setters still work for runtime updates.

Per-child constraints ​

LayoutConstraints:

  • fill — FillType: NONE (preferred size), HORIZONTAL, VERTICAL, BOTH.
  • anchor — AnchorType: used when the cell is larger than the child.
typescript
import { FillType, AnchorType } from '@jimka/typescript-ui/layout';
toolbar.addComponent(button, {
    fill:   FillType.VERTICAL,    // stretch to row height
    anchor: AnchorType.CENTER,    // center horizontally within its slot
});

Common methods ​

MethodPurpose
setSpacing(px)Gap between children.
setStretching(boolean)When true, all children fill the row's full height.

Baseline alignment ​

When children of mixed heights share a row (e.g. a Text label next to a TextField, Button, ComboBox, Checkbox, or ProgressBar), HBox aligns them by their visual baseline — the same way CSS vertical-align aligns inline-block elements.

Each component reports a baseline via getBaseline():

  • Text-bearing components (Text, Label, Button, TextField, ComboBox, NumberSpinner, …) return their inner-text baseline (font ascent), measured from the top of the component. HBox lines up these baselines.
  • Graphical / replaced components (ProgressBar, Image, Slider, Checkbox, the inner radio of RadioButton, …) return null. HBox treats them like CSS vertical-align: middle: their vertical center sits on the row baseline, so a radio circle or checkbox aligns nicely with the surrounding text rather than sitting on top of the line.

HBox picks the largest reported baseline in the row, augments it with half the tallest null-baseline child (so a tall graphical control like ProgressSpinner doesn't push the row off-screen), and offsets each child so the rule above holds. The row's preferred height grows to ascent + descent where ascent and descent each take the larger of the text-baseline contribution and the null-child half-height.

If no child reports a baseline, HBox falls back to the legacy top-aligned layout. Baseline alignment is also skipped when setStretching(true) is enabled, since stretching forces every child to fill the row vertically and there is no shared baseline to align.

See also ​