Skip to content
Documentation
Components
Layout
Frame

Frame

A Frame sets the size constraints of a component: fixed width and height, minimum and maximum sizes, and how it behaves inside a flex stack. All fields are optional; a zero field does not constrain the layout. Most components take a frame through their Frame method, many also offer FullWidth() as a shortcut.

Frame

return VStack(
	HStack(
		Text("Size").BackgroundColor("#C9E7F8").Frame(Frame{}.Size(L120, L48)),
		Text("Grow()").BackgroundColor("#FDE2C4").Frame(Frame{Height: L48}.Grow()),
		Text("Size").BackgroundColor("#C9E7F8").Frame(Frame{}.Size(L120, L48)),
	).Gap(L8).FullWidth(),
	Text("FullWidth()").BackgroundColor("#D8F0D2").Frame(Frame{Height: L48}.FullWidth()),
	Text("MinWidth: L200").BackgroundColor("#E5D8F6").Frame(Frame{MinWidth: L200, Height: L48}),
).Gap(L8).
	Alignment(Leading).
	Frame(Frame{Width: L560})

Fields

FieldDescription
Width, HeightFixed size as a Length.
MinWidth, MaxWidth, MinHeight, MaxHeightLower and upper bounds.
FlexGrowGrow inside the available space of a stack, see Grow.
FlexPreventShrinkDo not shrink inside a stack, see PreventShrink.

Methods

MethodDescription
FullHeight() FrameSets the frame’s height to 100% of the available space.
FullWidth() FrameSets the frame’s width to 100% of the available space.
Grow() FrameTells the frame to grow inside the available space of a flex stack.
IsZero() boolReturns true if all fields of the Frame are unset (zero value).
Large() FrameSets the max width to 560dp (35rem) and Width to Full.
Larger() FrameSets the width to 880dp (55rem) and Width to Full.
MatchScreen() FrameSets the frame to match the full viewport height and width.
PreventShrink() FrameTells the frame to not shrink inside a flex stack.
Size(w, h Length) FrameSets both Width and Height to the given values and returns the updated Frame.
Relative sizes like FullWidth() or Full only take effect if the parent has a size itself. A stack wraps its content by default, so a child with full width needs a parent with full width too.

Related