iwmlib

Class: Switch

Switch

Class that represents a PixiJS Switch.

new Switch (opts)

switch.js:109

Creates an instance of a Switch.

Name Type Description
opts object optional

An options object to specify to style and behaviour of the switch.

Name Type Default Description
id number auto generated optional

The id of the switch.
x number 0 optional

The x position of the switch. Can be also set after creation with switch.x = 0.
y number 0 optional

The y position of the switch. Can be also set after creation with switch.y = 0.
theme string | Theme dark optional

The theme to use for this switch. Possible values are dark, light, red or a Theme object.
width number 44 optional

The width of the switch.
height number 28 optional

The height of the switch.
fill number Theme.fill optional

The color of the switch background as a hex value.
fillAlpha number Theme.fillAlpha optional

The alpha value of the background.
fillActive number Theme.fillActive optional

The color of the switch background when activated.
fillActiveAlpha number Theme.fillActiveAlpha optional

The alpha value of the background when activated.
stroke number Theme.stroke optional

The color of the border as a hex value.
strokeWidth number Theme.strokeWidth optional

The width of the border in pixel.
strokeAlpha number Theme.strokeAlpha optional

The alpha value of the border.
strokeActive number Theme.strokeActive optional

The color of the border when activated.
strokeActiveWidth number Theme.strokeActiveWidth optional

The width of the border in pixel when activated.
strokeActiveAlpha number Theme.strokeActiveAlpha optional

The alpha value of the border when activated.
controlFill number Theme.stroke optional

The color of the switch control background as a hex value.
controlFillAlpha number Theme.strokeAlpha optional

The alpha value of the background.
controlFillActive number Theme.stroke optional

The color of the switch control background when activated.
controlFillActiveAlpha number Theme.strokeAlpha optional

The alpha value of the background when activated.
controlStroke number Theme.stroke optional

The color of the border as a hex value.
controlStrokeWidth number Theme.strokeWidth * 0.8 optional

The width of the border in pixel.
controlStrokeAlpha number Theme.strokeAlpha optional

The alpha value of the border.
controlStrokeActive number Theme.stroke optional

The color of the border when activated.
controlStrokeActiveWidth number Theme.strokeActiveWidth * 0.8 optional

The width of the border in pixel when activated.
controlStrokeActiveAlpha number Theme.strokeActiveAlpha optional

The alpha value of the border when activated.
duration number Theme.fast optional

The duration of the animation when the switch gets activated in seconds.
durationActive number Theme.fast optional

The duration of the animation when the switch gets deactivated in seconds.
disabled boolean false optional

Is the switch disabled? When disabled, the switch has a lower alpha value and cannot be clicked (interactive is set to false).
active boolean false optional

Is the button initially active?
action actionCallback optional

Executed when the switch was triggered in inactive state (by pointerup).
actionActive actionActiveCallback optional

Executed when the button was triggered in active state (by pointerup).
beforeAction beforeActionCallback optional

Executed before an action is triggered.
afterAction afterActionCallback optional

Executed after an action was triggered.
tooltip string | object optional

A string for the label of the tooltip or an object to configure the tooltip to display.
visible boolean true optional

Is the switch initially visible (property visible)?
See:
Example
// Create the app
const app = new PIXIApp({
    view: canvas,
    width: 900,
    height: 250
}).setup().run()

// Create the switch
const switch1 = new Switch({
    x: 10,
    y: 20
})

// Add the switch to a DisplayObject
app.scene.addChild(switch1)

Extends

  • PIXI.Container

Members

active boolean

Gets or sets the active state.

disabled boolean

Gets or sets the disabled state. When disabled, the switch cannot be clicked.

Methods

hide ()Switch

switch.js:553

Hides the switch (sets his alpha values to 1).

Returns:
Type Description
Switch A reference to the switch for chaining.

layout ()Switch

switch.js:301

Should be called to refresh the layout of the switch. Can be used after resizing.

Returns:
Type Description
Switch A reference to the switch for chaining.

show ()Switch

switch.js:533

Shows the switch (sets his alpha values to 1).

Returns:
Type Description
Switch A reference to the switch for chaining.