Class Toggle

Animated toggle switch component with customizable colors and optional labels. Supports smooth color transitions between on/off states.

Example

const toggle = new Toggle({
  width: 60,
  height: 30,
  borderRadius: 50,
  onBackgroundColor: 0x4cd964,
  offBackgroundColor: 0xe5e5e5,
  onCircleColor: 0xffffff,
  offCircleColor: 0xffffff,
  animationOptions: {
    type: AnimationType.LINEAR,
    duration: 200,
  },
}, true);

toggle.onToggle((isOn) => console.log('Toggle state:', isOn));
stage.addChild(toggle);

Hierarchy

Container
- Toggle

Constructors

constructor

new Toggle(options: ToggleOptions, isToggled?: boolean): Toggle
Creates a new Toggle instance.
Parameters
- options: ToggleOptions
  Configuration options for the toggle appearance and behavior
- OptionalisToggled: boolean
  Initial toggle state (default: false). Prefer using options.startingValue instead.
Returns Toggle
Overrides PIXI.Container.constructor
- Defined in Components/Toggle.ts:74

Properties

alpha

alpha: number

angle

angle: number

buttonMode

buttonMode: boolean

children

children: DisplayObject[]

cursor

cursor: string

`Optional`destroyed

destroyed?: boolean

eventMode

eventMode: EventMode

height

height: number

hitArea

hitArea:
    | Rectangle
    | RoundedRectangle
    | { contains(x: number, y: number): boolean }
    | null

interactive

interactive: boolean

interactiveChildren

interactiveChildren: boolean

mask

mask: DisplayObject | null

parent

parent: Container | null

pivot

pivot: Point

position

position: Point

renderable

renderable: boolean

rotation

rotation: number

scale

scale: Point

sortableChildren

sortableChildren: boolean

visible

visible: boolean

width

width: number

worldTransform

worldTransform: {
    a: number;
    b: number;
    c: number;
    d: number;
    tx: number;
    ty: number;
}

x

x: number

y

y: number

Accessors

activeBackgroundColor

get activeBackgroundColor(): number
Returns number
- Defined in Components/Toggle.ts:149

activeCircleColor

get activeCircleColor(): number
Returns number
- Defined in Components/Toggle.ts:157

activeTextLabel

get activeTextLabel(): BitmapTextLike | null
Returns BitmapTextLike | null
- Defined in Components/Toggle.ts:165

inactiveBackgroundColor

get inactiveBackgroundColor(): number
Returns number
- Defined in Components/Toggle.ts:153

inactiveCircleColor

get inactiveCircleColor(): number
Returns number
- Defined in Components/Toggle.ts:161

inactiveTextLabel

get inactiveTextLabel(): BitmapTextLike | null
Returns BitmapTextLike | null
- Defined in Components/Toggle.ts:169

toggled

get toggled(): boolean
Gets the current toggle state

Returns boolean
- Defined in Components/Toggle.ts:187
set toggled(val: boolean): void
Parameters
- val: boolean
Returns void
- Defined in Components/Toggle.ts:177

travelToX

get travelToX(): number
Returns number
- Defined in Components/Toggle.ts:173

Methods

addChild

addChild<T extends DisplayObject>(...child: T[]): T
Type Parameters
- T extends DisplayObject
Parameters
- ...child: T[]
Returns T
Inherited from PIXI.Container.addChild
- Defined in global.d.ts:123

addChildAt

addChildAt<T extends DisplayObject>(child: T, index: number): T
Type Parameters
- T extends DisplayObject
Parameters
- child: T
- index: number
Returns T
Inherited from PIXI.Container.addChildAt
- Defined in global.d.ts:124

addListener

addListener(event: string, fn: EventListener): this
Parameters
- event: string
- fn: EventListener
Returns this
Inherited from PIXI.Container.addListener
- Defined in global.d.ts:105

destroy

destroy(
    options?:
        | boolean
        | { baseTexture?: boolean; children?: boolean; texture?: boolean },
): void
Parameters
- Optionaloptions: boolean | { baseTexture?: boolean; children?: boolean; texture?: boolean }
Returns void
Inherited from PIXI.Container.destroy
- Defined in global.d.ts:113

emit

emit(event: string, ...args: unknown[]): boolean
Parameters
- event: string
- ...args: unknown[]
Returns boolean
Inherited from PIXI.Container.emit
- Defined in global.d.ts:104

getBounds

getBounds(skipUpdate?: boolean): Rectangle
Parameters
- OptionalskipUpdate: boolean
Returns Rectangle
Inherited from PIXI.Container.getBounds
- Defined in global.d.ts:109

getChildAt

getChildAt(index: number): DisplayObject
Parameters
- index: number
Returns DisplayObject
Inherited from PIXI.Container.getChildAt
- Defined in global.d.ts:130

getChildIndex

getChildIndex(child: DisplayObject): number
Parameters
- child: DisplayObject
Returns number
Inherited from PIXI.Container.getChildIndex
- Defined in global.d.ts:128

getGlobalPosition

getGlobalPosition(point?: Point, skipUpdate?: boolean): Point
Parameters
- Optionalpoint: Point
- OptionalskipUpdate: boolean
Returns Point
Inherited from PIXI.Container.getGlobalPosition
- Defined in global.d.ts:108

getLocalBounds

getLocalBounds(rect?: Rectangle): Rectangle
Parameters
- Optionalrect: Rectangle
Returns Rectangle
Inherited from PIXI.Container.getLocalBounds
- Defined in global.d.ts:110

off

off(event: string, fn?: EventListener, context?: unknown): this
Parameters
- event: string
- Optionalfn: EventListener
- Optionalcontext: unknown
Returns this
Inherited from PIXI.Container.off
- Defined in global.d.ts:102

on

on(event: string, fn: EventListener, context?: unknown): this
Parameters
- event: string
- fn: EventListener
- Optionalcontext: unknown
Returns this
Inherited from PIXI.Container.on
- Defined in global.d.ts:101

once

once(event: string, fn: EventListener, context?: unknown): this
Parameters
- event: string
- fn: EventListener
- Optionalcontext: unknown
Returns this
Inherited from PIXI.Container.once
- Defined in global.d.ts:103

onToggle

onToggle(callback: (toggled: boolean) => void): void
Registers a callback to be invoked when the toggle state changes.
Parameters
- callback: (toggled: boolean) => void
  Function to call with the new toggle state (boolean)
Returns void
- Defined in Components/Toggle.ts:195

removeAllListeners

removeAllListeners(event?: string): this
Parameters
- Optionalevent: string
Returns this
Inherited from PIXI.Container.removeAllListeners
- Defined in global.d.ts:107

removeChild

removeChild<T extends DisplayObject>(...child: T[]): T
Type Parameters
- T extends DisplayObject
Parameters
- ...child: T[]
Returns T
Inherited from PIXI.Container.removeChild
- Defined in global.d.ts:125

removeChildAt

removeChildAt(index: number): DisplayObject
Parameters
- index: number
Returns DisplayObject
Inherited from PIXI.Container.removeChildAt
- Defined in global.d.ts:126

removeChildren

removeChildren(beginIndex?: number, endIndex?: number): DisplayObject[]
Parameters
- OptionalbeginIndex: number
- OptionalendIndex: number
Returns DisplayObject[]
Inherited from PIXI.Container.removeChildren
- Defined in global.d.ts:127

removeListener

removeListener(event: string, fn?: EventListener): this
Parameters
- event: string
- Optionalfn: EventListener
Returns this
Inherited from PIXI.Container.removeListener
- Defined in global.d.ts:106

setChildIndex

setChildIndex(child: DisplayObject, index: number): void
Parameters
- child: DisplayObject
- index: number
Returns void
Inherited from PIXI.Container.setChildIndex
- Defined in global.d.ts:129

sortChildren

sortChildren(): void
Returns void
Inherited from PIXI.Container.sortChildren
- Defined in global.d.ts:132

swapChildren

swapChildren(a: DisplayObject, b: DisplayObject): void
Parameters
- a: DisplayObject
- b: DisplayObject
Returns void
Inherited from PIXI.Container.swapChildren
- Defined in global.d.ts:131

toGlobal

toGlobal(position: { x: number; y: number }, point?: Point): Point
Parameters
- position: { x: number; y: number }
- Optionalpoint: Point
Returns Point
Inherited from PIXI.Container.toGlobal
- Defined in global.d.ts:111

toLocal

toLocal(
    position: { x: number; y: number },
    from?: DisplayObject,
    point?: Point,
): Point
Parameters
- position: { x: number; y: number }
- Optionalfrom: DisplayObject
- Optionalpoint: Point
Returns Point
Inherited from PIXI.Container.toLocal
- Defined in global.d.ts:112

Class Toggle

Example

Hierarchy

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns Toggle

Properties

alpha

angle

buttonMode

children

cursor

Optionaldestroyed

eventMode

height

hitArea

interactive

interactiveChildren

mask

parent

pivot

position

renderable

rotation

scale

sortableChildren

visible

width

worldTransform

x

y

Accessors

activeBackgroundColor

Returns number

activeCircleColor

Returns number

activeTextLabel

Returns BitmapTextLike | null

inactiveBackgroundColor

Returns number

inactiveCircleColor

Returns number

inactiveTextLabel

Returns BitmapTextLike | null

toggled

Returns boolean

Parameters

Returns void

travelToX

Returns number

Methods

addChild

Type Parameters

Parameters

Returns T

addChildAt

Type Parameters

Parameters

Returns T

addListener

Parameters

Returns this

destroy

Parameters

Returns void

emit

Parameters

Returns boolean

getBounds

Parameters

Returns Rectangle

getChildAt

Parameters

Returns DisplayObject

`Optional`destroyed