@jimka/typescript-ui

Appearance

IconText ​

IconText is a small composite that pairs a Glyph on the left with a Text label on the right, laid out horizontally with a configurable gap (default 0).

Use this when you need an icon next to free-floating text (a status line, a toolbar caption, a button-like row that isn't a button). For an icon paired with a form-control label, use IconLabel instead — its trailing text is a real <label for="…">.

Usage ​

typescript
import { IconText } from '@jimka/typescript-ui/component/display';

panel.addComponent(IconText('times', 'Close'));
panel.addComponent(IconText('arrow-right', 'Next', { gap: 12 }));

Construction ​

IconText(glyph, text, options?) — both glyph and text are required positional arguments. The glyph name must exist in the Glyphs registry.

OptionTypeDefaultPurpose
glyphstring—Override of the constructor glyph argument.
textstring—Override of the constructor text argument.
gapnumber0Pixels between the glyph and the text.

Inherits the common ComponentOptions fields (preferred size, background, foreground, etc.).

Common methods ​

MethodPurpose
setGlyph(name)Replace the leading glyph with a fresh instance for the given registry name.
setText(text)Update the trailing label text.
setGap(px)Change the pixel gap between the glyph and the text.
getGlyphComponent()Access the inner Glyph.
getTextComponent()Access the inner Text.

See also ​