iwmlib

Class: Button

Button

Class that represents a PixiJS Button.

new Button (opts)

button.js:50

Creates an instance of a Button.

Name Type Description
opts object optional

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

Name Type Default Description
id number auto generated optional

The id of the button.
label string optional

The label of the button.
x number 0 optional

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

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

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

The minimum width of the button.
minHeight number 44 optional

The minimum height of the button.
padding number Theme.padding optional

The inner spacing (distance from icon and/or label) to the border.
icon string | PIXI.DisplayObject optional

The icon of the button. Can be a predefined one, an URL or an PIXI.DisplayObject.
iconActive string | PIXI.DisplayObject icon optional

The icon of the button when activated. Can be a predefined one, an URL or an PIXI.DisplayObject.
iconPosition string left optional

The position of the icon in relation to the label. Can be left or right.
iconColor number Theme.iconColor optional

The color of the icon (set by the tint property) as a hex value.
iconColorActive number Theme.iconColorActive optional

The color of the icon when activated.
fill number Theme.fill optional

The color of the button 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 button 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.
textStyle object Theme.textStyle optional

A textstyle object for the styling of the label. See PIXI.TextStyle for possible options.
textStyleActive number Theme.textStyleActive optional

A textstyle object for the styling of the label when the button is activated. See PIXI.TextStyle for possible options.
style string default optional

A shortcut for styling options. Possible values are default, link.
radius number Theme.radius optional

The radius of the four corners of the button (which is a rounded rectangle).
disabled boolean false optional

Is the button disabled? When disabled, the button 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 button was triggered (by pointerup).
beforeAction beforeActionCallback optional

Executed before the main action is triggered.
afterAction afterActionCallback optional

Executed after the main action was triggered.
type string default optional

The type of the button. Can be default or checkbox. When the type is checkbox, the active state is toggled automatically.
align string center optional

The horizontal position of the label and the icon. Possible values are left, center and right. Only affects the style when the minWidth is bigger than the width of the icon and label.
verticalAlign string middle optional

The vertical position of the label and the icon. Possible values are top, middle and button. Only affects the style when the minHeight is bigger than the height of the icon and label.
tooltip string | object optional

A string for the label of the tooltip or an object to configure the tooltip to display.
badge string | object optional

A string for the label of the badge or an object to configure the badge to display. If the parameter is an object, all badge options can be set plus the following:

Name Type Default Description
align string right optional

The horizontal alignment of the badge. Possible values: left, center, right
verticalAlign string top optional

The vertical alignment of the badge. Possible values: top, middle, bottom
offsetLeft number 0 optional

The horizontal shift of the badge.
offsetTop number 0 optional

The vertical shift of the badge.
visible boolean true optional

Is the button initially visible (property visible)?
See:
Example
// Create the button
const button = new Button({
    label: 'My Button',
    action: () => console.log('Button was clicked')
})

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

Extends

  • PIXI.Container

Members

active boolean

Gets or sets the active state.

disabled boolean

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

iconColor number

Gets or sets the color of the current icon (no matter how the status is). Changing the color, changes the tint property of the icon sprite.

Methods

capture (event)

button.js:193

Captures an event to inform InteractionMapper about processed events.

Name Type Description
event event | PIXI.InteractionEvent

The PIXI event to capture.

hide ()Button

button.js:595

Hides the button (sets his alpha values to 0).

Returns:
Type Description
Button A reference to the button for chaining.

layout ()Button

button.js:350

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

Returns:
Type Description
Button A reference to the button for chaining.

show ()Button

button.js:578

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

Returns:
Type Description
Button A reference to the button for chaining.