HomeWeb Components API Reference - v0.17.0
    Preparing search index...

    Class ButtonComponentElement

    The ButtonComponentElement interface provides properties and methods for manipulating <pc-button> elements. The ButtonComponentElement interface also inherits the properties and methods of the HTMLElement interface.

    Engine component: ButtonComponent (button).

    Hierarchy (View Summary)

    Index
    active closestApp closestEntity component enabled fadeDuration hitPadding hoverSpriteAsset hoverSpriteFrame hoverTint image inactiveSpriteAsset inactiveSpriteFrame inactiveTint pressedSpriteAsset pressedSpriteFrame pressedTint transitionMode
    _onReady _resetReady getInitialComponentData initComponent ready
    • get closestApp(): AppElement | null

      The nearest ancestor <pc-app> element, or null if this element has no <pc-app> ancestor. The search starts at the parent, so an element never resolves to itself.

      Returns AppElement | null

      The closest app element, or null.

    • get closestEntity(): EntityBaseElement | null

      The nearest ancestor element that fronts an entity — <pc-entity>, <pc-model> or <pc-node> — or null if this element has no such ancestor. The search starts at the parent, so an element never resolves to itself.

      Returns EntityBaseElement | null

      The closest entity-fronting element, or null.

    • get enabled(): boolean

      Gets the enabled state of the component.

      Returns boolean

      The enabled state of the component.

    • set enabled(value: boolean): void

      Sets the enabled state of the component.

      Parameters

      • value: boolean

        The enabled state of the component.

      Returns void

    • get fadeDuration(): number

      Gets the duration over which tint transitions are applied.

      Returns number

      The fade duration.

    • set fadeDuration(value: number): void

      Sets the duration (in milliseconds) over which tint transitions are applied.

      Parameters

      • value: number

        The fade duration.

      Returns void

    • get hoverSpriteAsset(): string

      Gets the id of the pc-asset sprite shown when the button is hovered.

      Returns string

      The hover sprite asset id.

    • set hoverSpriteAsset(value: string): void

      Sets the id of the pc-asset sprite shown when the button is hovered (sprite transition mode).

      Parameters

      • value: string

        The hover sprite asset id.

      Returns void

    • get image(): string

      Gets the reference to the <pc-entity> whose image element is used for visual transitions.

      Returns string

      The image entity reference.

    • set image(value: string): void

      Sets the reference (CSS selector, element id or entity name) to the <pc-entity> whose image element is used for visual transitions. Defaults to the button's own entity — inside a <pc-model>, that is the model's host entity, so supply an explicit reference to target a UI entity instead.

      Parameters

      • value: string

        The image entity reference.

      Returns void

    • get inactiveSpriteAsset(): string

      Gets the id of the pc-asset sprite shown when the button is inactive.

      Returns string

      The inactive sprite asset id.

    • set inactiveSpriteAsset(value: string): void

      Sets the id of the pc-asset sprite shown when the button is inactive (sprite transition mode).

      Parameters

      • value: string

        The inactive sprite asset id.

      Returns void

    • get pressedSpriteAsset(): string

      Gets the id of the pc-asset sprite shown when the button is pressed.

      Returns string

      The pressed sprite asset id.

    • set pressedSpriteAsset(value: string): void

      Sets the id of the pc-asset sprite shown when the button is pressed (sprite transition mode).

      Parameters

      • value: string

        The pressed sprite asset id.

      Returns void

    • get transitionMode(): "sprite" | "tint"

      Gets how the button reacts to being hovered/pressed.

      Returns "sprite" | "tint"

      The transition mode.

    • set transitionMode(value: "sprite" | "tint"): void

      Sets how the button reacts to being hovered/pressed. Can be tint or sprite. Defaults to tint.

      Parameters

      • value: "sprite" | "tint"

        The transition mode.

      Returns void

    Protected_onReady

    • _onReady(): void

      Called when the element is fully initialized and ready. Subclasses should call this when they're ready. Resolves the ready promise and dispatches a bubbling, composed ready event. Signals at most once per readiness cycle: a repeat call before _resetReady has re-armed the promise does nothing.

      Returns void

    Protected_resetReady

    • _resetReady(): void

      Returns the ready promise to its pending state. Subclasses should call this when the resource their readiness announced is torn down (typically from disconnectedCallback), so that a later re-initialization can signal readiness again. Does nothing while the promise is still pending — an in-flight waiter carries over to the next readiness cycle rather than being stranded on a promise nothing will ever resolve.

      Returns void

    • Returns a promise that resolves with this element when it's ready. This is the low-level primitive underlying whenReady, which is the recommended way to wait for elements.

      Readiness tracks the element's current lifecycle: once a ready element is torn down (for example by removing it from the document), this returns a fresh promise that resolves when the element is next ready. A promise obtained earlier stays resolved — call this again after re-inserting an element rather than reusing a promise from before its removal.

      Returns Promise<ButtonComponentElement>

      A promise that resolves with this element when it's ready.

    Settings
    Member Visibility

    On This Page
    Accessors
    Methods