UIImageProps

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

Props for UIImage.

Size one of width / height and the other follows the texture’s aspect ratio, even where a flex parent would stretch it. Size both and the texture stretches to that box. Size neither and the element takes the texture’s own pixel size. flexGrow, flex and flexBasis size the main axis too, so with one of those set the texture stretches as if both axes were sized.

Extends

• LayoutProps.ConsumeInputProps.PointerEventProps.FocusProps

Properties

alignSelf?

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

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

Inherited from

LayoutProps.alignSelf

---

alpha?

optional alpha?: number

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

---

bottom?

optional bottom?: PositionValue

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

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

Inherited from

LayoutProps.bottom

---

consumeInput?

optional consumeInput?: boolean

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

Inherited from

ConsumeInputProps.consumeInput

---

flex?

optional flex?: number

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

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.

Inherited from

LayoutProps.flex

---

flexBasis?

optional flexBasis?: LayoutValue

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

Inherited from

LayoutProps.flexBasis

---

flexGrow?

optional flexGrow?: number

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

Inherited from

LayoutProps.flexGrow

---

flexShrink?

optional flexShrink?: number

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

Inherited from

LayoutProps.flexShrink

---

focusable?

optional focusable?: boolean

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

Take part in focus navigation. Defaults to true for UIButton, UICheckbox and the six interactive @pixi/ui wrappers, false for everything else. false leaves the element enabled for the pointer.

Inherited from

FocusProps.focusable

---

focusId?

optional focusId?: string

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

Name this element so a sibling’s FocusProps.focusNeighbors can point at it. Unique inside one scope: a duplicate id draws a development warning, and the first element in tree order answers to it.

Inherited from

FocusProps.focusId

---

focusNeighbors?

optional focusNeighbors?: FocusNeighbors

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

Per-direction overrides of the position rule.

Inherited from

FocusProps.focusNeighbors

---

focusStyle?

optional focusStyle?: UIFocusStyle | null

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

The focus outline for this element alone. Each field falls back to the plugin-level focusStyle, then to the built-in default. null draws no outline on this element.

Inherited from

FocusProps.focusStyle

---

height?

optional height?: LayoutValue

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

Inherited from

LayoutProps.height

---

left?

optional left?: PositionValue

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

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

Inherited from

LayoutProps.left

---

margin?

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

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

Inherited from

LayoutProps.margin

---

maxHeight?

optional maxHeight?: LayoutValue

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

Inherited from

LayoutProps.maxHeight

---

maxWidth?

optional maxWidth?: LayoutValue

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

Inherited from

LayoutProps.maxWidth

---

minHeight?

optional minHeight?: LayoutValue

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

Inherited from

LayoutProps.minHeight

---

minWidth?

optional minWidth?: LayoutValue

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

Inherited from

LayoutProps.minWidth

---

onAdjust?

optional onAdjust?: (direction) => void

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

Called with -1 for left and 1 for right while this element is focused, consuming that press. Up and down still move focus.

Parameters

direction

-1 | 1

Returns

void

Inherited from

FocusProps.onAdjust

---

onFocusChange?

optional onFocusChange?: (focused) => void

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

Called with true when focus arrives and false when it leaves, including when the scope stops taking input. Use it to show focus without an outline: a marker beside the row, a swapped sprite, a sound.

Parameters

focused

boolean

Returns

void

Inherited from

FocusProps.onFocusChange

---

onHover?

optional onHover?: (hovering) => void

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

Parameters

hovering

boolean

Returns

void

Inherited from

PointerEventProps.onHover

---

onPointerOut?

optional onPointerOut?: () => void

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

Returns

void

Inherited from

PointerEventProps.onPointerOut

---

onPointerOver?

optional onPointerOver?: () => void

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

Returns

void

Inherited from

PointerEventProps.onPointerOver

---

position?

optional position?: "relative" | "absolute"

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

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.

Inherited from

LayoutProps.position

---

right?

optional right?: PositionValue

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

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

Inherited from

LayoutProps.right

---

rotation?

optional rotation?: number

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

Rotation in radians about LayoutProps.transformOrigin. Default 0.

Inherited from

LayoutProps.rotation

---

scale?

optional scale?: number | { x: number; y: number; }

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

Scale about LayoutProps.transformOrigin, one number for both axes or one per axis. Default 1. 0 and negative values are allowed.

Inherited from

LayoutProps.scale

---

texture

texture: TextureInput

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

---

tint?

optional tint?: number

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

---

top?

optional top?: PositionValue

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

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

Inherited from

LayoutProps.top

---

transformOrigin?

optional transformOrigin?: number | { x: number; y: number; }

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

The point scale and rotation turn about, as fractions of the element’s computed size: 0 is the top-left corner, 0.5 the centre, { x: 0.5, y: 1 } the middle of the bottom edge. Default 0. This prop, scale, rotation and zIndex change how the element is drawn, never its Yoga box.

Inherited from

LayoutProps.transformOrigin

---

visible?

optional visible?: boolean

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

Inherited from

LayoutProps.visible

---

width?

optional width?: LayoutValue

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

Inherited from

LayoutProps.width

---

zIndex?

optional zIndex?: number

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

Draw and pointer order among the siblings in the same container: a higher value draws on top and takes the pointer first. Default 0; siblings with equal values keep the order they were added in. To rise above an element in a neighbouring container, raise that container.

Inherited from

LayoutProps.zIndex