Skip to content

UITextProps

Defined in: ui/src/types.ts:235

Props for UIText (used by reconciler and props-driven constructor).

optional alignSelf?: "stretch" | "auto" | "flex-start" | "center" | "flex-end" | "baseline"

Defined in: ui/src/types.ts:137

LayoutProps.alignSelf


optional bitmap?: boolean

Defined in: ui/src/types.ts:258

Render with a bitmap font instead of canvas-rasterised Text. Pixel-art escape hatch — canvas text blurs at non-integer scale on non-Retina displays. Pixi bakes or looks up the glyph atlas from style.fontFamily (the name an installBitmapFont call registered, or any font for a dynamic bake) at style.fontSize. Yoga measurement (wrap / truncate) is unchanged.


optional bottom?: PositionValue

Defined in: ui/src/types.ts:163

Offset from the containing block’s bottom edge — px or "<n>%" (only applies to position: "absolute").

LayoutProps.bottom


optional children?: string

Defined in: ui/src/types.ts:239


optional consumeInput?: boolean

Defined in: ui/src/types.ts:209

ConsumeInputProps.consumeInput


optional flex?: number

Defined in: ui/src/types.ts:136

Shorthand for the common CSS flex: <number> case — expands to flexGrow: <number>, flexShrink: 1, flexBasis: 0. Use it for a child that should fill the remaining main-axis space (e.g. the text column between a fixed icon and a fixed button): sizing from a 0 basis means it won’t claim its content width and push its siblings, and its text wraps cleanly. Prefer this over flexGrow: 1 alone, which keeps flexBasis: auto (content width) and overflows. Explicit flexGrow/flexShrink/flexBasis override the parts this expands to.

LayoutProps.flex


optional flexBasis?: LayoutValue

Defined in: ui/src/types.ts:125

LayoutProps.flexBasis


optional flexGrow?: number

Defined in: ui/src/types.ts:123

LayoutProps.flexGrow


optional flexShrink?: number

Defined in: ui/src/types.ts:124

LayoutProps.flexShrink


optional height?: LayoutValue

Defined in: ui/src/types.ts:115

LayoutProps.height


optional left?: PositionValue

Defined in: ui/src/types.ts:157

Offset from the containing block’s left edge — px or "<n>%" (only applies to position: "absolute").

LayoutProps.left


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

Defined in: ui/src/types.ts:120

LayoutProps.margin


optional maxHeight?: LayoutValue

Defined in: ui/src/types.ts:119

LayoutProps.maxHeight


optional maxWidth?: LayoutValue

Defined in: ui/src/types.ts:117

LayoutProps.maxWidth


optional minHeight?: LayoutValue

Defined in: ui/src/types.ts:118

LayoutProps.minHeight


optional minWidth?: LayoutValue

Defined in: ui/src/types.ts:116

LayoutProps.minWidth


optional onHover?: (hovering) => void

Defined in: ui/src/types.ts:231

boolean

void

PointerEventProps.onHover


optional onPointerOut?: () => void

Defined in: ui/src/types.ts:230

void

PointerEventProps.onPointerOut


optional onPointerOver?: () => void

Defined in: ui/src/types.ts:229

void

PointerEventProps.onPointerOver


optional position?: "relative" | "absolute"

Defined in: ui/src/types.ts:155

Positioning mode for this element relative to its parent. Defaults to "relative" — the element flows in the parent’s flex layout. Set to "absolute" to lift the element out of the flow and pin it via left / top / right / bottom against the parent’s content box.

A position: "relative" ancestor acts as the containing block for any absolute-positioned descendants — useful for HUD overlays, modal backdrops, and badge markers. See <ZStack> in @yagejs/ui-react for an opinionated overlay primitive.

LayoutProps.position


optional resolution?: number

Defined in: ui/src/types.ts:265

Per-text render resolution. Mirrors the Pixi v8 Text constructor option — resolution is NOT a TextStyle property in v8, so this is the only way to get crisp canvas text without a prototype patch. Ignored when bitmap is set.


optional right?: PositionValue

Defined in: ui/src/types.ts:161

Offset from the containing block’s right edge — px or "<n>%" (only applies to position: "absolute").

LayoutProps.right


optional style?: Partial<TextStyleOptions>

Defined in: ui/src/types.ts:240


optional top?: PositionValue

Defined in: ui/src/types.ts:159

Offset from the containing block’s top edge — px or "<n>%" (only applies to position: "absolute").

LayoutProps.top


optional truncate?: "clip" | "ellipsis"

Defined in: ui/src/types.ts:249

Overflow behavior when the rendered text is wider than the layout slot:

  • omitted: wrap to the layout width (default)
  • "clip": render a single line; visible overflow is cut by the parent panel’s overflow setting.
  • "ellipsis": render a single line truncated with so the text fits within the layout width.

optional visible?: boolean

Defined in: ui/src/types.ts:164

LayoutProps.visible


optional width?: LayoutValue

Defined in: ui/src/types.ts:114

LayoutProps.width