@moxijs/ui - v0.3.5
    Preparing search index...

    Class UIPanel

    Panel component with 9-slice sprite or solid color background. Use for containers, windows, cards, boxes, and other UI backgrounds.

    // 9-slice sprite background (scales without distorting corners)
    const panel = new UIPanel({
      texture: panelTexture,
      nineSlice: { leftWidth: 16, topHeight: 16, rightWidth: 16, bottomHeight: 16 },
      width: 300,
      height: 200
    });

    // Solid color background with border
    const colorPanel = new UIPanel({
      backgroundColor: 0x2c3e50,
      backgroundAlpha: 0.9,
      borderColor: 0x3d3d54,
      borderWidth: 1,
      width: 300,
      height: 200,
      borderRadius: 8
    });

    // Update at runtime
    panel.setBackgroundColor(0xff0000);
    panel.setBorder(0x00ff00, 2);

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

    boxModel computedLayout container enabled focused focusRing? fontConfig? hovered id layoutConfig? layoutDirty layoutEngine parent? pressed tabIndex themeResolver? visible

    Accessors

    layoutNode x y

    Methods

    applyLayout canFocus destroy getBoxModel getFontConfig getGlobalBounds getInheritedFontFamily getInheritedFontSize getInheritedFontType getInheritedTextColor getLayout getLayoutConfig getThemeResolver hide hideFocusRing isFocused layout makeInteractive markLayoutDirty measure measureContent onBlur onFocus render resolveCheckmarkColor resolveColor resolveControlColor resolveInheritedFont resolveInheritedLayoutParam resolvePlaceholderColor resolveTextColor setAlignSelf setBackgroundColor setBorder setFlex setFlexBasis setFlexGrow setFlexShrink setFontConfig setLayoutConfig setPosition setTexture show showFocusRing syncLayoutStyle updateFocusRing

    Constructors

    Properties

    boxModel: BoxModel

    The box model defining this component's sizing and spacing

    computedLayout: ComputedLayout

    The computed layout after measurement and positioning

    container: Container

    The PIXI container that holds this component's visual representation

    enabled: boolean = true

    Whether this component is enabled for interaction

    focused: boolean = false

    Internal focus state

    focusRing?: Graphics

    Focus ring for visual focus indication

    fontConfig?: UIFontConfig

    Font configuration for this component. Children inherit these settings (like CSS font inheritance). Set via setFontConfig() and resolved via getInheritedFont* methods.

    hovered: boolean = false

    Hover state (for components that track hover)

    id: string

    Unique identifier for this component in the layout tree

    layoutConfig?: UILayoutConfig

    Layout configuration for this component. Children inherit these defaults unless overridden.

    layoutDirty: boolean = true

    Flag indicating if layout needs to be recalculated

    layoutEngine: LayoutEngine

    Layout engine service for calculating layouts Initialized in base class so all components have access to layout calculations

    parent?: UIComponent

    Reference to parent component (if any)

    pressed: boolean = false

    Pressed state (for components that track press)

    tabIndex: number = -1

    Tab index for focus order (-1 means not focusable by tab)

    themeResolver?: ThemeResolver

    Optional theme resolver for color resolution Components can set this to enable automatic theming

    visible: boolean = true

    Whether this component is currently visible

    Accessors

    • get x(): number

      Gets the x position of this component

      Returns number

    • set x(value: number): void

      Sets the x position of this component

      Parameters

      • value: number

      Returns void

    • get y(): number

      Gets the y position of this component

      Returns number

    • set y(value: number): void

      Sets the y position of this component

      Parameters

      • value: number

      Returns void

    Methods

    • Gets the global bounds of this component (position relative to stage)

      Returns { height: number; width: number; x: number; y: number }

    • Performs layout - resolving inherited defaults if needed

      Parameters

      • availableWidth: number
      • availableHeight: number

      Returns void

    • Helper to make container interactive with common settings Components can call this in setupInteractivity() or override for custom behavior

      Parameters

      • cursor: string = 'pointer'

        Cursor type ('pointer', 'text', 'default', etc.)

      Returns void

    • 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 }.

      Returns { height: number; width: number }

      The content size in pixels

    • Resolve a color from theme with optional override Simplifies color resolution across all components

      Parameters

      • type: "background" | "border" | "text" | "focus" | "disabled" | "selected" | "hover"
      • Optionaloverride: number

      Returns number

    • Resolve a control-specific color with optional override

      Parameters

      • controlType: "button" | "select" | "checkbox" | "textInput" | "textArea" | "radio"
      • type: "background" | "border" | "text"
      • Optionaloverride: number

      Returns number

    • Resolves a layout setting by walking up the parent chain. Allows components to adapt to their context (e.g. using parent's default padding).

      Type Parameters

      • K extends keyof UILayoutConfig

      Parameters

      • key: K

        The layout config key to resolve

      • OptionallocalOverride: UILayoutConfig[K]

        Optional local override value

      Returns UILayoutConfig[K]

      The resolved value or undefined

    • Sets align-self property

      Parameters

      • align: "auto" | "center" | "end" | "start" | "stretch"

      Returns void

    • Update background color (solid color panels only).

      Parameters

      • color: number
      • alpha: number = 1

      Returns void

    • Update border (solid color panels only).

      Parameters

      • color: number
      • width: number

      Returns void

    • Sets layout configuration for this component. Children will inherit these settings.

      Parameters

      • config: UILayoutConfig

      Returns void

    • Update texture (texture-based panels only).

      Parameters

      • texture: Texture

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods