Layout cheatsheet¶

Tick UI exposes a set of single-rect layout helpers, listed here in one table. Each row covers a method, the rect it pushes onto the rect stack, and a one-line picker rule. For the multi-element schemas (Series, Stack, Sized, Split, Grid, Radial), refer to Schemas.

Edges¶

Helper	Pushes	When to use
`Top(Size size)`	A strip inset from the top edge.	A header bar or top toolbar.
`Bottom(Size size)`	A strip inset from the bottom edge.	A footer or status bar.
`Left(Size size)`	A strip inset from the left edge.	A side rail.
`Right(Size size)`	A strip inset from the right edge.	A side rail.

A negative Size value insets from the opposite edge. For example, Right(-200) pushes "everything except the right 200 pixels".

For a fixed strip and the rest of the rect together, use PushSizedVertical or PushSizedHorizontal with an explicit Size[] (for example, { 32, 1.0f }). The schema names the structure in one statement. Refer to Schemas.

Halves¶

Helper	Pushes	When to use
`TopHalf()`	The top half of the current rect.	Splitting a panel into two horizontal halves.
`BottomHalf()`	The bottom half.	Same.
`LeftHalf()`	The left half.	Splitting vertically.
`RightHalf()`	The right half.	Same.

Centring¶

Helper	Pushes	When to use
`Center(Size size)`	A square of the given size, centred.	A square button or icon.
`Center(Size w, Size h)`	A `(w, h)` rect centred.	A non-square dialog body.
`CenterHorizontal(Size dim)`	A `dim`-wide rect centred horizontally; full height.	A column inside a panel.
`CenterVertical(Size dim)`	A `dim`-tall rect centred vertically; full width.	A horizontal strip in the middle of a panel.

Insets (corner- and edge-anchored)¶

Helper	Pushes
`InsetTopLeft(x, y, w, h)`	A `(w, h)` rect inset `x` from the left and `y` from the top.
`InsetTop(y, w, h)`	A `(w, h)` rect centred horizontally, inset `y` from the top.
`InsetTopRight(x, y, w, h)`	A `(w, h)` rect inset `x` from the right and `y` from the top.
`InsetLeft(x, w, h)`	A `(w, h)` rect centred vertically, inset `x` from the left.
`InsetRight(x, w, h)`	A `(w, h)` rect centred vertically, inset `x` from the right.
`InsetBottomLeft(x, y, w, h)`	A `(w, h)` rect inset `x` from the left and `y` from the bottom.
`InsetBottom(y, w, h)`	A `(w, h)` rect centred horizontally, inset `y` from the bottom.
`InsetBottomRight(x, y, w, h)`	A `(w, h)` rect inset `x` from the right and `y` from the bottom.

Insets are useful for HUD overlays anchored to a screen corner or edge.

Padding¶

Helper	Pushes	When to use
`Pad(int pixels)`	The current rect, contracted by `pixels` on every side.	Uniform padding.
`Pad(Margin margin)`	The current rect, contracted by the margin's per-side values.	A `Margin` literal or member.
`Pad(Size l, Size t, Size r, Size b)`	The current rect, contracted by per-side amounts.	Asymmetric padding.
`PadHorizontal(Size size)`	The current rect, contracted by `size` on left and right.	Horizontal-only padding.
`PadVertical(Size size)`	The current rect, contracted by `size` on top and bottom.	Vertical-only padding.
`PadLeft(Size size)`	The current rect, contracted by `size` on the left.	Single-edge padding.
`PadRight(Size size)`	Same on the right.	Same.
`PadTop(Size size)`	Same on the top.	Same.
`PadBottom(Size size)`	Same on the bottom.	Same.

Transforms¶

Helper	Pushes	When to use
`Offset(Size x, Size y)`	The current rect, translated by `(x, y)`.	Nudging a section.
`PushScale(float scale)`	A scaled version of the current rect, pivoted on the rect centre.	Hover-press scale animations.
`PushRotate(float angleDeg)`	A rotated version of the current rect.	Tilted decorations.
`ScaleFromPivot(float scale, Vector2 pivot)`	A scaled version with a custom pivot.	Animations that scale from a non-centre point.

Other helpers¶

Helper	Pushes
`PushRect(Rect rect)`	The given rect directly. The lowest-level entry point.
`PushRelativeRect(Rect rect)`	The given rect, offset by the current rect's position. Used to render into a rect computed in a child coordinate system (for example, the `caretRect` returned from `Textbox`).
`PushRectCenteredOnPoint(Vector2 point, Vector2 size)`	A `size` rect centred on the given screen point.
`PushRectAnchoredToPoint(Vector2 point, Vector2 size, AnchorPoint anchor)`	A `size` rect anchored to the point at the given anchor.
`PushRelativeRectCenteredOnPoint(Vector2 point, Vector2 size)`	The same, in the current rect's coordinate system.

Additional resources¶

Schemas: the multi-element layout schemas (Series, Stack, Sized, Split, Grid, Radial).
Layout: the workflow side, including the Auto() scope.
Coordinate spaces: the layout-to-screen split that affects what these helpers push.
Stacks: the rect stack's contract.