SilkButton

import { SilkButton } from 'pixi-silk/ui/button';

A button that animates in and out, refuses input while it moves and keeps its state in signals.

• show() / hide() (or write state.shown) spring it in and out. Both return a promise that resolves true when the animation finishes, false when it was reversed half way.
• Input is off while it appears, disappears, is disabled or busy: no double activations, no taps on a button that is fading away.
• A press that slides off the button still counts when released within twice the pointer’s slop.
• Optional long-press (holdMs) with a progress indicator, for example tap to run once, hold to repeat.
• state.busy swaps the content for a spinner.

The button is centred on its origin. The theme and content are fixed at construction.

Extends#

• Container

Constructors#

Constructor#

new SilkButton(options?: SilkButtonOptions): SilkButton;

Parameters#

Returns#

SilkButton

Overrides#

Container.constructor

Properties#

Accessors#

appearance#

Get Signature#

get appearance(): number;

Appearance from 0 (gone) to 1 (fully shown), as animated. Layouts use it to open and close gaps.

Returns

number

buttonHeight#

Get Signature#

get buttonHeight(): number;

Height of the shape in local units, without the hit padding.

Returns

number

buttonWidth#

Get Signature#

get buttonWidth(): number;

Width of the shape in local units, without the hit padding.

Returns

number

Methods#

destroy()#

destroy(options?: DestroyOptions): void;

Stops the animation and resolves pending show / hide promises with false. Destroys children by default.

Parameters#

Returns#

void

Overrides#

Container.destroy

hide()#

hide(): Promise<boolean>;

Animates the button out. Resolves true when it finishes (at once if already hidden), false if reversed first.

Returns#

Promise<boolean>

press()#

press(): void;

Fires onPress and the press bounce as if tapped. Does nothing unless state.active.

Returns#

void

show()#

show(): Promise<boolean>;

Animates the button in. Resolves true when it finishes (at once if already shown), false if reversed first.

Returns#

Promise<boolean>

tick()#

tick(dt: number): boolean;

Advances the animation by dt seconds (only needed with ticker: null). Returns true while moving.

Parameters#

Returns#

boolean