Appearance

Home › Overview › Flux

Layout ​

Layout instances with friendly, reactive arguments: padding, corner, stroke, list, grid, flex, gradient, aspectRatio, sizeConstraint, textSizeConstraint. Each is flat on Flux.

luau
Flux.new "Frame" { Flux.list { gap = 8, align = "center" }, Flux.corner(12) }

Types ​

Length type ​

luau
type Length = number | UDim

ReactiveLength type ​

luau
type ReactiveLength = Reactive<number> | Reactive<UDim>

Insets type ​

luau
type Insets = { top: number?, bottom: number?, left: number?, right: number? }

Align type ​

luau
type Align = "start" | "center" | "end"

FlexAlign type ​

luau
type FlexAlign = Align | "between" | "around" | "evenly" | "stretch" | "fill" | "none"

LineAlign type ​

luau
type LineAlign = Align | "stretch" | "automatic"

Direction type ​

luau
type Direction = "x" | "y"

FlexMode type ​

luau
type FlexMode = "fill" | "grow" | "shrink" | "none"

PaddingSides type ​

luau
type PaddingSides = {
	top: ReactiveLength?,
	bottom: ReactiveLength?,
	left: ReactiveLength?,
	right: ReactiveLength?,
	x: ReactiveLength?,
	y: ReactiveLength?,
}

ListConfig type ​

luau
type ListConfig = {
	gap: ReactiveLength?,
	direction: Reactive<Direction | Enum.FillDirection>?,
	align: Reactive<FlexAlign>?,
	justify: Reactive<FlexAlign>?,
	horizontalAlign: Reactive<FlexAlign | Enum.HorizontalAlignment | Enum.UIFlexAlignment>?,
	verticalAlign: Reactive<FlexAlign | Enum.VerticalAlignment | Enum.UIFlexAlignment>?,
	lineAlign: Reactive<LineAlign | Enum.ItemLineAlignment>?,
	wraps: Reactive<boolean>?,
}

GridConfig type ​

luau
type GridConfig = {
	cell: Reactive<number | Vector2 | UDim2>?,
	gap: Reactive<number | Vector2 | UDim2>?,
	fill: Reactive<Direction | Enum.FillDirection>?,
	align: Reactive<Align | Enum.HorizontalAlignment>?,
	justify: Reactive<Align | Enum.VerticalAlignment>?,
	maxCells: Reactive<number>?,
}

StrokeConfig type ​

luau
type StrokeConfig = {
	thickness: Reactive<number>?,
	color: Reactive<Color3>?,
	transparency: Reactive<number>?,
	mode: Reactive<"contextual" | "border" | Enum.ApplyStrokeMode>?,
	joins: Reactive<"round" | "bevel" | "miter" | Enum.LineJoinMode>?,
	position: Reactive<"inner" | "center" | "outer" | Enum.BorderStrokePosition>?,
	offset: Reactive<number | UDim>?,
}

CornerSides type ​

luau
type CornerSides = {
	radius: ReactiveLength?,
	topLeft: ReactiveLength?,
	topRight: ReactiveLength?,
	bottomLeft: ReactiveLength?,
	bottomRight: ReactiveLength?,
	top: ReactiveLength?,
	bottom: ReactiveLength?,
	left: ReactiveLength?,
	right: ReactiveLength?,
}

GradientConfig type ​

luau
type GradientConfig = {
	color: Reactive<Color3 | ColorSequence | { Color3 }>?,
	transparency: Reactive<number | NumberSequence | { number }>?,
	rotation: Reactive<number>?,
	offset: Reactive<Vector2>?,
	enabled: Reactive<boolean>?,
}

SizeConstraintConfig type ​

luau
type SizeConstraintConfig = {
	min: Reactive<Vector2>?,
	max: Reactive<Vector2>?,
	minWidth: Reactive<number>?,
	minHeight: Reactive<number>?,
	maxWidth: Reactive<number>?,
	maxHeight: Reactive<number>?,
}

TextSizeConstraintConfig type ​

luau
type TextSizeConstraintConfig = {
	min: Reactive<number>?,
	max: Reactive<number>?,
}

Functions ​

padding ​

luau
Layout.padding(value: Length | PaddingSides | Graph.Node<any> | (() -> Length | Insets)): UIPadding

Creates a UIPadding from a single length, a { top, bottom, left, right, x, y } table, or a reactive source. Plain number values are interpreted as offset pixels.

Open Documentation

corner ​

luau
Layout.corner(radius: ReactiveLength | CornerSides?): UICorner

Creates a UICorner from an offset pixel radius, a UDim, or a per-corner { topLeft, topRight, bottomLeft, bottomRight, top, bottom, left, right, radius } table.

Open Documentation

stroke ​

luau
Layout.stroke(config: StrokeConfig?): UIStroke

Creates a UIStroke with static or reactive thickness, color, transparency, mode, joins, position, and offset.

Open Documentation

aspectRatio ​

luau
Layout.aspectRatio(ratio: Reactive<number>, aspectType: Reactive<"fit" | "scale" | Enum.AspectType>?, dominantAxis: Reactive<"width" | "height" | Enum.DominantAxis>?): UIAspectRatioConstraint

Creates a UIAspectRatioConstraint with ratio, aspectType ("fit" or "scale"), and dominantAxis ("width" or "height").

Open Documentation

list ​

luau
Layout.list(config: ListConfig?): UIListLayout

Creates a UIListLayout with SortOrder = LayoutOrder and flexbox-style gap, direction, align (cross-axis), justify (main-axis), and wraps options.

Open Documentation

grid ​

luau
Layout.grid(config: GridConfig?): UIGridLayout

Creates a UIGridLayout with SortOrder = LayoutOrder and cell, gap, fill, align, justify, and maxCells options.

Open Documentation

flex ​

luau
Layout.flex(mode: Reactive<FlexMode | Enum.UIFlexMode>?): UIFlexItem

Creates a UIFlexItem with mode ("fill" by default, "grow", "shrink", or "none").

Open Documentation

gradient ​

luau
Layout.gradient(config: GradientConfig?): UIGradient

Creates a UIGradient from single values, evenly spaced stop arrays, or sequences for color and transparency.

Open Documentation

sizeConstraint ​

luau
Layout.sizeConstraint(config: SizeConstraintConfig?): UISizeConstraint

Creates a UISizeConstraint from min/max Vector2 bounds or per-axis minWidth, minHeight, maxWidth, and maxHeight bounds.

Open Documentation

textSizeConstraint ​

luau
Layout.textSizeConstraint(config: TextSizeConstraintConfig?): UITextSizeConstraint

Creates a UITextSizeConstraint bounding text size between min and max pixels.

Open Documentation