LayoutProps

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

Common layout props every element can accept (applied to its Yoga node).

Extended by

• UITextProps
• UISplitTextProps
• UIButtonProps
• UIImageProps
• UINineSliceProps
• UIProgressBarProps
• UICheckboxProps
• UIPanelProps
• UIScrollViewProps
• PixiFancyButtonProps
• PixiCheckboxProps
• PixiProgressBarProps
• PixiSliderProps
• PixiInputProps
• PixiSelectProps
• PixiRadioGroupProps

Properties

alignSelf?

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

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

---

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").

---

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.

---

flexBasis?

optional flexBasis?: LayoutValue

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

---

flexGrow?

optional flexGrow?: number

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

---

flexShrink?

optional flexShrink?: number

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

---

height?

optional height?: LayoutValue

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

---

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").

---

margin?

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

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

---

maxHeight?

optional maxHeight?: LayoutValue

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

---

maxWidth?

optional maxWidth?: LayoutValue

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

---

minHeight?

optional minHeight?: LayoutValue

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

---

minWidth?

optional minWidth?: LayoutValue

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

---

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.

---

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").

---

rotation?

optional rotation?: number

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

Rotation in radians about LayoutProps.transformOrigin. Default 0.

---

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.

---

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").

---

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.

---

visible?

optional visible?: boolean

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

---

width?

optional width?: LayoutValue

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

---

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.