docs › primitives › api reference › container reference

container reference¶

The general-purpose layout blob. Holds children and exposes the full style surface: layout, flex, spacing, border, background, filters, transforms, and state variants.

structural properties¶

property	type	notes
Effect	ShaderEffect?	A custom shader effect to render this blob with (FrostedGlass, Spotlight, Particles, or a custom ShaderEffect). Drawn via IPanelDraw; coexists with Draw.
Draw	DrawCallback?	A custom immediate-mode draw callback. Receives a `Canvas` for issuing batched primitive draws (rects, text, shadows, ...).
LayoutTransition	LayoutTransition?	Declared transition for layout position moves. When this blob's flex slot changes (pop, insert, reorder, reflow), it glides to the new position instead of snapping. Declare per child; survivors must be keyed.
Tag	string?	Global effect-addressing tag. When set and no inline `Effect` is given, the effect resolves from the host's effect manifest. May repeat across the tree; distinct from `Key` (sibling-local reconciliation identity).
SwallowClick	bool	When true, a left click stops propagating before reaching a parent handler. Use on the content panel inside a scrim or popover so clicks inside do not dismiss the overlay.
Disabled	bool?	Forces PointerEvents to None and dims the resolved opacity while true. Applied after all other declared fields, so per-property PointerEvents and Opacity declarations cannot override it.

layout¶

property	type	notes
FlexDirection	FlexDirection?	Main-axis direction for children: Row lays them left-to-right, Column top-to-bottom (engine default Column).
JustifyContent	Justify?	Distributes children along the main axis (start, center, end, or the space-* spreads).
AlignItems	Align?	Aligns children on the cross axis, the axis perpendicular to FlexDirection.
Display	DisplayMode?	Box generation: Flex lays out children, None removes the panel from layout entirely.
AlignContent	Align?	Aligns wrapped flex lines on the cross axis when there is spare room; only bites once content wraps.
AlignSelf	Align?	Overrides the parent's AlignItems for this one child.
FlexBasis	Length?	Initial main-axis size of a flex child before grow and shrink are applied.
FlexGrow	float?	Share of leftover main-axis space this child claims; 0 (default) means do not grow.
FlexShrink	float?	How readily this child shrinks when space is tight; 0 pins it to its basis.
FlexWrap	Wrap?	Whether children wrap onto multiple lines when they overflow the main axis.
Order	int?	Reorders this child visually among its siblings (lower draws first) without moving it in the tree.
Position	PositionMode?	Positioning scheme: Relative offsets from the normal slot, Absolute lifts the box out of flow against the nearest positioned ancestor.
ZIndex	int?	Stacking order among overlapping siblings; higher draws on top.

position offsets¶

property	type	notes
Bottom	Length?	Bottom-edge offset; applied only when Position is Relative or Absolute.
Left	Length?	Left-edge offset; applied only when Position is Relative or Absolute.
Right	Length?	Right-edge offset; applied only when Position is Relative or Absolute.
Top	Length?	Top-edge offset; applied only when Position is Relative or Absolute.

sizing¶

property	type	notes
Width	Length?	Width of the box (Length: px, %, em, rem, ...).
Height	Length?	Height of the box.
AspectRatio	float?	Locks the width-to-height ratio when only one dimension is constrained.
MaxHeight	Length?	Upper bound on height.
MaxWidth	Length?	Upper bound on width; the box never grows past it.
MinHeight	Length?	Lower bound on height.
MinWidth	Length?	Lower bound on width; the box never shrinks below it.

spacing¶

property	type	notes
Padding	Length?	Inner space on all four edges, between the border and the content.
PaddingLeft	Length?	Inner space on the left edge.
PaddingTop	Length?	Inner space on the top edge.
PaddingRight	Length?	Inner space on the right edge.
PaddingBottom	Length?	Inner space on the bottom edge.
PaddingX	Length?	Left and right padding in one declaration.
PaddingY	Length?	Top and bottom padding in one declaration.
Margin	Length?	Outer space on all four edges, between this box and its neighbors.
MarginLeft	Length?	Outer space on the left edge.
MarginTop	Length?	Outer space on the top edge.
MarginRight	Length?	Outer space on the right edge.
MarginBottom	Length?	Outer space on the bottom edge.
MarginX	Length?	Left and right margin in one declaration.
MarginY	Length?	Top and bottom margin in one declaration.
Gap	Length?	Space between flex children on both axes (shorthand for RowGap and ColumnGap).
RowGap	Length?	Vertical space between flex rows.
ColumnGap	Length?	Horizontal space between flex columns.

PaddingX and MarginX set the left and right edges in one declaration; PaddingY and MarginY set top and bottom. The style list is append-only: a per-edge property declared after the shorthand overrides it for that edge.

background¶

property	type	notes
BackgroundColor	Color?	Fill color behind the content.
BackgroundAngle	Length?	Angle in radians for a background gradient.
BackgroundBlendMode	string?	Blend mode between stacked background layers (CSS background-blend-mode keyword).
BackgroundImage	Texture?	Texture drawn as the background.
BackgroundPlaybackPaused	bool?	Pauses playback of an animated or video background texture.
BackgroundPositionX	Length?	Horizontal offset of the background image.
BackgroundPositionY	Length?	Vertical offset of the background image.
BackgroundRepeat	BackgroundRepeat?	How the background image tiles (repeat, repeat-x/y, no-repeat, clamp).
BackgroundSizeX	Length?	Rendered width of the background image.
BackgroundSizeY	Length?	Rendered height of the background image.
BackgroundTint	Color?	Multiplies the background image color; default white (no tint).

border¶

property	type	notes
BorderBottomColor	Color?	Color of the bottom border.
BorderColor	Color?	Color of all four borders.
BorderLeftColor	Color?	Color of the left border.
BorderRightColor	Color?	Color of the right border.
BorderTopColor	Color?	Color of the top border.
BorderBottomWidth	Length?	Thickness of the bottom border.
BorderLeftWidth	Length?	Thickness of the left border.
BorderRightWidth	Length?	Thickness of the right border.
BorderTopWidth	Length?	Thickness of the top border.
BorderWidth	Length?	Thickness of all four borders.

border image¶

property	type	notes
BorderImageFill	BorderImageFill?	Whether the center slice of the border image fills the box (Unfilled or Filled).
BorderImageRepeat	BorderImageRepeat?	How the edge slices of the border image repeat (Stretch or Round).
BorderImageSource	Texture?	Texture sliced into a nine-patch to form the border.
BorderImageTint	Color?	Tint multiplied onto the border image.
BorderImageWidthBottom	Length?	Width of the border-image slice on the bottom edge.
BorderImageWidthLeft	Length?	Width of the border-image slice on the left edge.
BorderImageWidthRight	Length?	Width of the border-image slice on the right edge.
BorderImageWidthTop	Length?	Width of the border-image slice on the top edge.

border radius¶

property	type	notes
BorderRadius	Length?	Rounds all four corners.
BorderTopLeftRadius	Length?	Rounds the top-left corner.
BorderTopRightRadius	Length?	Rounds the top-right corner.
BorderBottomRightRadius	Length?	Rounds the bottom-right corner.
BorderBottomLeftRadius	Length?	Rounds the bottom-left corner.
BorderTopRadius	Length?	Rounds both top corners in one declaration.
BorderBottomRadius	Length?	Rounds both bottom corners in one declaration.
BorderLeftRadius	Length?	Rounds both left corners in one declaration.
BorderRightRadius	Length?	Rounds both right corners in one declaration.

The last four are pair shorthands: BorderTopRadius sets both top corners, BorderLeftRadius both left corners, and so on. A per-corner property declared after the shorthand overrides it for that corner.

outline¶

property	type	notes
OutlineColor	Color?	Color of the outline drawn just outside the border.
OutlineOffset	Length?	Gap between the border edge and the outline.
OutlineWidth	Length?	Thickness of the outline.

font¶

property	type	notes
FontColor	Color?	Text color (s&box uses font-color, not the CSS color property).
FontFamily	string?	Font face name.
FontSize	Length?	Text size.
FontSmooth	FontSmooth?	Text antialiasing hint (Auto, Never, Always).
FontStyle	FontStyle?	Italic or oblique styling.
FontVariantNumeric	FontVariantNumeric?	Numeric glyph variant, e.g. TabularNums for fixed-width digits.
FontWeight	int?	Boldness from 100 to 900 (400 normal, 700 bold).

text¶

property	type	notes
LetterSpacing	Length?	Extra space between characters.
LineHeight	Length?	Height of each line of text (default 100%).
TextAlign	TextAlign?	Horizontal alignment of text within its box.
TextBackgroundAngle	Length?	Angle in radians for a gradient fill painted onto the text.
TextDecorationColor	Color?	Color of the underline, overline, or line-through.
TextDecorationLine	TextDecoration?	Which decoration lines to draw (underline, overline, line-through; flags).
TextDecorationSkipInk	TextSkipInk?	Whether decoration lines skip over glyph descenders.
TextDecorationStyle	TextDecorationStyle?	Decoration line style (solid, double, dotted, dashed, wavy).
TextDecorationThickness	Length?	Thickness of the decoration line.
TextFilter	FilterMode?	Texture filtering mode used when rendering text.
TextLineThroughOffset	Length?	Vertical offset of the line-through.
TextOverflow	TextOverflow?	How clipped text is signalled (None, Ellipsis, Clip).
TextOverlineOffset	Length?	Vertical offset of the overline.
TextStrokeColor	Color?	Color of the text outline stroke.
TextStrokeWidth	Length?	Width of the text outline stroke.
TextTransform	TextTransform?	Case transform applied at render (Uppercase, Lowercase, Capitalize).
TextUnderlineOffset	Length?	Vertical offset of the underline.
WhiteSpace	WhiteSpace?	Whitespace and wrapping handling (Normal, NoWrap, Pre, PreLine).
WordBreak	WordBreak?	Whether long words may break mid-word to avoid overflow.
WordSpacing	Length?	Extra space between words.

effects¶

property	type	notes
CaretColor	Color?	Color of the text-input caret.
ImageRendering	ImageRendering?	Texture sampling for scaled images (Point, Bilinear, Trilinear, Anisotropic).
MixBlendMode	string?	Blend mode against what is drawn behind the panel (CSS mix-blend-mode keyword).
Opacity	float?	Overall opacity from 0 (transparent) to 1 (opaque).

filter¶

property	type	notes
FilterBlur	Length?	Gaussian blur applied to the element.
FilterBorderColor	Color?	Color of the filter-pass border.
FilterBorderWidth	Length?	Width of the border drawn by the filter pass.
FilterBrightness	Length?	Brightness multiplier; 1 leaves it unchanged.
FilterContrast	Length?	Contrast multiplier; 1 leaves it unchanged.
FilterHueRotate	Length?	Hue rotation angle.
FilterInvert	Length?	Color inversion amount; 0 none, 1 full.
FilterSaturate	Length?	Saturation multiplier; 1 unchanged, 0 grayscale.
FilterSepia	Length?	Sepia amount; 0 none, 1 full.
FilterTint	Color?	Tint color multiplied over the element; default white.

backdrop filter¶

property	type	notes
BackdropFilterBlur	Length?	Blur applied to whatever shows through behind the element (frosted-glass effect).
BackdropFilterBrightness	Length?	Brightness multiplier on the backdrop; 1 unchanged.
BackdropFilterContrast	Length?	Contrast multiplier on the backdrop; 1 unchanged.
BackdropFilterHueRotate	Length?	Hue rotation on the backdrop.
BackdropFilterInvert	Length?	Inversion amount on the backdrop.
BackdropFilterSaturate	Length?	Saturation multiplier on the backdrop; 1 unchanged.
BackdropFilterSepia	Length?	Sepia amount on the backdrop.

mask¶

property	type	notes
MaskAngle	Length?	Angle in radians for a gradient mask.
MaskImage	Texture?	Texture whose alpha or luminance masks the element.
MaskMode	MaskMode?	Whether the mask reads alpha or luminance (MatchSource, Alpha, Luminance).
MaskPositionX	Length?	Horizontal offset of the mask image.
MaskPositionY	Length?	Vertical offset of the mask image.
MaskRepeat	BackgroundRepeat?	How the mask image tiles (reuses the BackgroundRepeat values).
MaskScope	MaskScope?	Whether the mask applies to the element or to its filter pass (Default, Filter).
MaskSizeX	Length?	Rendered width of the mask image.
MaskSizeY	Length?	Rendered height of the mask image.

transform¶

property	type	notes
PerspectiveOriginX	Length?	Horizontal vanishing point for 3D-transformed children (default 50%).
PerspectiveOriginY	Length?	Vertical vanishing point for 3D-transformed children (default 50%).
Transform	Goo.PanelTransform?	Translate, rotate, scale, and skew applied to the rendered box.
TransformOriginX	Length?	Horizontal pivot the transform rotates and scales around (default 50%).
TransformOriginY	Length?	Vertical pivot the transform rotates and scales around (default 50%).

overflow¶

property	type	notes
Overflow	OverflowMode?	Clipping and scrolling for content past the box on both axes.
OverflowX	OverflowMode?	Overflow handling on the horizontal axis.
OverflowY	OverflowMode?	Overflow handling on the vertical axis.

misc¶

property	type	notes
Cursor	string?	Mouse cursor shown on hover (CSS cursor keyword).
PointerEvents	PointerEvents?	Whether the element receives pointer input (All or None).
SoundIn	string?	Sound played when the element appears.
SoundOut	string?	Sound played when the element is removed.

state variants¶

property	type	notes
HoverBackgroundColor	Color?	BackgroundColor while the pointer is over the element.
ActiveBackgroundColor	Color?	BackgroundColor while the element is pressed.
FocusBackgroundColor	Color?	BackgroundColor while the element has focus.
HoverFontColor	Color?	FontColor while the pointer is over the element.
ActiveFontColor	Color?	FontColor while the element is pressed.
FocusFontColor	Color?	FontColor while the element has focus.
TransitionMs	int?	Duration in milliseconds for the Hover/Active/Focus color transitions.

events and key¶

property	type	notes
OnClick	Action?	Called when clicked with the left mouse button.
OnRightClick	Action?	Called when clicked with the right mouse button.
OnMiddleClick	Action?	Called when clicked with the middle mouse button.
OnMouseEnter	Action?	Called when the pointer enters.
OnMouseLeave	Action?	Called when the pointer leaves.
OnMouseDown	Action?	Called when a mouse button is pressed.
OnMouseUp	Action?	Called when a mouse button is released.
OnMouseMove	Action?	Called when the pointer moves over it.
OnMouseWheel	Action?	Called when the mouse wheel scrolls over it. The argument is the wheel delta (y positive = scroll down). Setting this consumes the wheel so it does not bubble to an ancestor scroll container.
OnDragStart	Action?	Called when a drag begins on this blob.
OnDrag	Action?	Called on each frame of an in-flight drag.
OnDragEnd	Action?	Called when a drag started on this blob ends.
OnDragEnter	Action?	Called when a dragged item enters this blob as a drop target.
OnDragLeave	Action?	Called when a dragged item leaves this blob as a drop target.
OnDrop	Action?	Called when a dragged item is dropped on this blob.
Key	string?	Stable identity across rebuilds. Set it when this blob can change position among its siblings, so the reconciler matches it to the same panel.