OptionalboxModel: Partial<BoxModel>ProtectedboxThe box model defining this component's sizing and spacing
ProtectedcomputedThe computed layout after measurement and positioning
The PIXI container that holds this component's visual representation
Whether this component is enabled for interaction
ProtectedfocusedInternal focus state
Protected OptionalfocusFocus ring for visual focus indication
Protected OptionalfontFont configuration for this component. Children inherit these settings (like CSS font inheritance). Set via setFontConfig() and resolved via getInheritedFont* methods.
ProtectedhoveredHover state (for components that track hover)
ReadonlyidUnique identifier for this component in the layout tree
Protected OptionallayoutLayout configuration for this component. Children inherit these defaults unless overridden.
ProtectedlayoutFlag indicating if layout needs to be recalculated
ProtectedlayoutLayout engine service for calculating layouts Initialized in base class so all components have access to layout calculations
OptionalparentReference to parent component (if any)
ProtectedpressedPressed state (for components that track press)
Tab index for focus order (-1 means not focusable by tab)
Protected OptionalthemeOptional theme resolver for color resolution Components can set this to enable automatic theming
Whether this component is currently visible
Get the layout node (IFlexLayoutParticipant)
Gets the x position of this component
Sets the x position of this component
Gets the y position of this component
Sets the y position of this component
Apply computed layout from the flex layout engine. Called after layout computation completes.
Updates both the internal computedLayout and PIXI container position.
The computed layout values
Whether this component can receive focus
Cleanup when destroying
Gets the box model of this component
Gets the font configuration for this component. Returns local config if set, otherwise undefined.
Gets the global bounds of this component (position relative to stage)
ProtectedgetGets the inherited font family (convenience method).
OptionallocalOverride: stringOptional local override
ProtectedgetGets the inherited font size (convenience method).
OptionallocalOverride: numberOptional local override
ProtectedgetProtectedgetGets the inherited text color (convenience method).
OptionallocalOverride: numberOptional local override
Gets the computed layout of this component
Gets the layout configuration for this component.
Gets the maximum scroll position
Gets the current scroll padding bottom
Gets the current scroll position
ProtectedgetGet theme resolver (creates default if none provided)
Hides this component
ProtectedhideHides the focus ring
Whether this component is currently focused
Performs layout for this container
ProtectedmakeHelper to make container interactive with common settings Components can call this in setupInteractivity() or override for custom behavior
Cursor type ('pointer', 'text', 'default', etc.)
Marks this component's layout as dirty, requiring recalculation
Measures the size needed for this container
Measure the intrinsic content size of this component. Called by the flex layout engine during Pass 2 (measure).
Override in subclasses that have intrinsic content size. For containers that size based on children, return { width: 0, height: 0 }.
The content size in pixels
Called when component loses focus Override in subclasses to customize blur behavior
Called when component receives focus Override in subclasses to customize focus behavior
ProtectedrenderRenders the container
ProtectedresolveResolve checkmark color with optional override
Optionaloverride: numberProtectedresolveResolve a color from theme with optional override Simplifies color resolution across all components
Optionaloverride: numberProtectedresolveResolve a control-specific color with optional override
Optionaloverride: numberProtectedresolveResolves a font setting by walking up the parent chain. Like CSS inheritance - returns local value if set, otherwise inherits from parent.
The font config key to resolve
OptionallocalOverride: UIFontConfig[K]Optional local override value
The resolved value or undefined
ProtectedresolveResolves a layout setting by walking up the parent chain. Allows components to adapt to their context (e.g. using parent's default padding).
The resolved value or undefined
ProtectedresolveResolve placeholder color with optional override
Optionaloverride: numberProtectedresolveResolve text color with optional override
Optionaloverride: numberScrolls to a specific Y position
Target scroll position
Optionalanimate: booleanWhether to animate the scroll (default: uses smoothScroll prop)
Scrolls to the bottom
Scrolls to the top
Sets align-self property
Sets the background color and redraws
Sets flex properties for this component
Sets flex basis
Sets flex grow factor
Sets flex shrink factor
Sets font configuration for this component. Children will inherit these settings (like CSS).
Sets layout configuration for this component. Children will inherit these settings.
Sets the position of this component
Sets the scroll padding bottom (extra scrollable area at bottom)
Extra height in pixels
Shows this component
ProtectedshowShows the focus ring
Sync BoxModel properties to the layout node's style. Called when BoxModel changes to keep the layout system in sync.
ProtectedupdateUpdates the focus ring appearance based on component size. Uses theme colors for consistent styling.
A scrollable container with a visual scrollbar Supports mouse wheel scrolling and draggable scrollbar thumb
Example