WidgetStyles

Defined in: src/dom/widget.ts:83

Inline style properties for a widget — the style prop’s shape. See the Styling and Layout guides.

Properties

align?

optional align?: "left" | "right" | "center"

Defined in: src/dom/widget.ts:125

Horizontal alignment of children on the cross axis.

background?

optional background?: string

Defined in: src/dom/widget.ts:87

Background color: hex, named, $token, or "transparent".

bold?

optional bold?: boolean

Defined in: src/dom/widget.ts:164

Bold/bright text.

border?

optional border?: string

Defined in: src/dom/widget.ts:109

Border around all four sides: "rounded" (default), "thin", "solid", "heavy", "double", "dashed", "bar" (solid block), or "none". Use the per-side props below for a single corner-less edge.

borderBottom?

optional borderBottom?: string

Defined in: src/dom/widget.ts:115

Bottom edge weight only (overrides border for this side).

borderColor?

optional borderColor?: string

Defined in: src/dom/widget.ts:119

Border color: hex, named, or $token.

borderLeft?

optional borderLeft?: string

Defined in: src/dom/widget.ts:117

Left edge weight only (overrides border for this side) — e.g. a chat-message accent bar.

borderRight?

optional borderRight?: string

Defined in: src/dom/widget.ts:113

Right edge weight only (overrides border for this side).

borderTop?

optional borderTop?: string

Defined in: src/dom/widget.ts:111

Top edge weight only (overrides border for this side); same values as border.

bottom?

optional bottom?: string | number

Defined in: src/dom/widget.ts:137

Offset from the parent’s bottom edge when positioned.

color?

optional color?: string

Defined in: src/dom/widget.ts:85

Foreground/text color: hex, named, or $token.

cursor?

optional cursor?: "default" | "move" | "pointer" | "text" | "vertical-text" | "wait" | "progress" | "help" | "crosshair" | "cell" | "grab" | "grabbing" | "alias" | "copy" | "no-drop" | "not-allowed" | "zoom-in" | "zoom-out" | "n-resize" | "e-resize" | "s-resize" | "w-resize" | "ne-resize" | "nw-resize" | "se-resize" | "sw-resize" | "ew-resize" | "ns-resize" | "nesw-resize" | "nwse-resize"

Defined in: src/dom/widget.ts:184

Mouse-pointer shape shown while the pointer is over this widget, named after the CSS cursor property ("pointer", "text", "grab", "not-allowed", "col-resize" → "ew-resize", …). Inherited from the nearest ancestor that sets it. Requires terminal OSC 22 support (see TerminalCapabilities.pointerShapes); ignored otherwise.

dim?

optional dim?: boolean

Defined in: src/dom/widget.ts:172

Reduced-intensity text.

display?

optional display?: "dock" | "grid" | "flex"

Defined in: src/dom/widget.ts:141

Layout mode alias: "flex" (use flexDirection), "grid", or "dock".

dock?

optional dock?: "bottom" | "top" | "left" | "right"

Defined in: src/dom/widget.ts:123

Pin this child to an edge of a dock parent.

flexDirection?

optional flexDirection?: "row" | "column"

Defined in: src/dom/widget.ts:145

Flex flow when display: "flex": "row" (horizontal) or "column" (vertical).

flexGrow?

optional flexGrow?: number

Defined in: src/dom/widget.ts:153

Share of leftover space along the flow axis (equivalent to N fr).

flexShrink?

optional flexShrink?: number

Defined in: src/dom/widget.ts:162

Share of the deficit this widget gives up when siblings overflow the container along the flow axis. Defaults to 0 — auto/fixed-sized widgets keep their measured size and the container overflows (subject to overflowX/overflowY), matching prior behavior. Set to a positive number to let this widget shrink instead; use minWidth/ minHeight as a floor.

flexWrap?

optional flexWrap?: "nowrap" | "wrap"

Defined in: src/dom/widget.ts:151

Whether children that overflow the flow axis wrap onto a new line instead of overflowing. Defaults to "nowrap" (back-compat — a single line, subject to flexShrink/overflowX/overflowY).

gridColumns?

optional gridColumns?: number

Defined in: src/dom/widget.ts:143

Number of equal-width columns when display: "grid". Defaults to 2.

height?

optional height?: string | number

Defined in: src/dom/widget.ts:91

Height: cells, "%", "fr", or "auto".

italic?

optional italic?: boolean

Defined in: src/dom/widget.ts:166

Italic text.

layout?

optional layout?: "vertical" | "horizontal" | "dock" | "grid"

Defined in: src/dom/widget.ts:121

Child flow direction / mode: vertical, horizontal, dock, or grid.

left?

optional left?: string | number

Defined in: src/dom/widget.ts:131

Offset from the parent’s left edge when positioned.

link?

optional link?: string

Defined in: src/dom/widget.ts:176

Hyperlink target (OSC 8) where the terminal supports it.

margin?

optional margin?: number | Spacing | { bottom?: number; left?: number; right?: number; top?: number; }

Defined in: src/dom/widget.ts:101

Space outside the border: number (all sides), per-side object, or Spacing.

maxHeight?

optional maxHeight?: number

Defined in: src/dom/widget.ts:99

Maximum height in cells.

maxWidth?

optional maxWidth?: number

Defined in: src/dom/widget.ts:97

Maximum width in cells.

minHeight?

optional minHeight?: number

Defined in: src/dom/widget.ts:95

Minimum height in cells.

minWidth?

optional minWidth?: number

Defined in: src/dom/widget.ts:93

Minimum width in cells.

overflowX?

optional overflowX?: "auto" | "scroll" | "hidden" | "visible"

Defined in: src/dom/widget.ts:186

Horizontal overflow: clip ("hidden", default), "scroll"/"auto", or "visible".

overflowY?

optional overflowY?: "auto" | "scroll" | "hidden" | "visible"

Defined in: src/dom/widget.ts:188

Vertical overflow handling (see overflowX).

padding?

optional padding?: number | Spacing | { bottom?: number; left?: number; right?: number; top?: number; }

Defined in: src/dom/widget.ts:103

Space inside the border, before content.

position?

optional position?: "relative" | "absolute"

Defined in: src/dom/widget.ts:129

"absolute" takes the widget out of flow, positioned by left/top/right/bottom.

reverse?

optional reverse?: boolean

Defined in: src/dom/widget.ts:170

Swap foreground and background.

right?

optional right?: string | number

Defined in: src/dom/widget.ts:135

Offset from the parent’s right edge when positioned.

strikethrough?

optional strikethrough?: boolean

Defined in: src/dom/widget.ts:174

Struck-through text.

top?

optional top?: string | number

Defined in: src/dom/widget.ts:133

Offset from the parent’s top edge when positioned.

underline?

optional underline?: boolean

Defined in: src/dom/widget.ts:168

Underlined text.

verticalAlign?

optional verticalAlign?: "bottom" | "top" | "middle"

Defined in: src/dom/widget.ts:127

Vertical alignment of children on the cross axis.

width?

optional width?: string | number

Defined in: src/dom/widget.ts:89

Width: cells (10), "50%", "3fr", or "auto".

zIndex?

optional zIndex?: number

Defined in: src/dom/widget.ts:139

Stacking order among siblings (higher paints on top).