iwmlib

Class: ButtonGroup

ButtonGroup

Class that represents a PixiJS ButtonGroup.

new ButtonGroup (opts)

buttongroup.js:31

Creates an instance of a ButtonGroup.

Name Type Description
opts object optional

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

Name Type Default Description
id number auto generated optional

The id of the button group.
x number 0 optional

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

The y position of the button group. Can be also set after creation with buttonGroup.y = 0.
buttons Array.<object> [] optional

An array of the buttons of the button group. One item of the array (one object) can have exactly the same properties as an Button object when instantiating a Button. If a property of the button group conflicts with a property of a button object, the value from the button object will be used.
theme string | Theme dark optional

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

Button: The minimum width of one button.
minHeight number 44 optional

Button: The minimum height of one button.
maxWidth number optional

The maximum width of the button group. If the buttons are wider than the maximum width, the buttons get stacked. Note: The buttons can only be stacked if margin is not zero. Note 2: Load the Greensock ThrowPropsPlugin for smoother animations.
maxHeight number optional

The maximum height of the button group. If the buttons are higher than the maximum height, the buttons get stacked. Note: The buttons can only be stacked if margin is not zero. Note 2: Load the Greensock ThrowPropsPlugin for smoother animations.
stackPadding number 10 optional

The padding for stacked buttons.
app PIXI.Application window.app optional

The PixiJS Application. Must be set if you want to use the mousewheel to scroll your button group. Only used when the buttons are stacked (with maxWidth or maxHeight).
padding number Theme.padding optional

Button: The inner spacing (distance from icon and/or label) the the border.
margin number Theme.margin optional

The outer spacing (distance from one button to the previous/next button).
iconPosition string left optional

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

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

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

Button: The color of the button background as a hex value.
fillAlpha number Theme.fillAlpha optional

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

Button: The color of the button background when activated.
fillActiveAlpha number Theme.fillActiveAlpha optional

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

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

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

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

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

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

Button: The alpha value of the border when activated.
textStyle object Theme.textStyle optional

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

Button: A textstyle object for the styling of the label when the button is activated. See PIXI.TextStyle for possible options.
textAlpha number Theme.textAlpha optional

Button: The alpha value of the text.
textActiveAlpha number Theme.textActiveAlpha optional

Button: The alpha value of the text when activated.
style string default optional

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

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

Is the button group disabled? When disabled, the button group has a lower alpha value and cannot be clicked (interactive of every button is set to false).
type string default optional

The type of the button group. Can be default, checkbox or radio. When the type is checkbox, the active state is toggled for each button automatically. When the type is radio, only one button can be activated at the same time.
orientation string horizontal optional

The orientation of the button group. Can be horizontal or vertical.
align string center optional

Button: 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

Button: The vertical position of the label and the icon. Possible values are top, middle and bottom. Only affects the style when the minHeight is bigger than the height of the icon and label.
visible boolean true optional

Is the button group initially visible (property visible)?
See:
Example
// Create the button group
const buttonGroup = new ButtonGroup({
    buttons: [
        {label: 'Button 1', action: event => console.log(event)},
        {label: 'Button 2', action: event => console.log(event)},
        {label: 'Button 3', action: event => console.log(event)}
    ],
    minWidth: 100
})

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

Extends

  • PIXI.Graphics

Members

disabled boolean

Gets or sets the disabled state. When disabled, no button of the button group can be clicked.

maxHeight number

Gets or sets the maximum height of the button group for stacking. Usefull when you want to resize the available space.

maxWidth number

Gets or sets the maximum width of the button group for stacking. Usefull when you want to resize the available space.

Methods

capture (event)

buttongroup.js:596

Captures an event to inform InteractionMapper about processed events.

Name Type Description
event event | PIXI.InteractionEvent

The PIXI event to capture.

hide ()ButtonGroup

buttongroup.js:442

Hides the button group (sets his alpha value to 0).

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

layout ()ButtonGroup

buttongroup.js:317

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

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

show ()ButtonGroup

buttongroup.js:431

Shows the button group (sets his alpha value to 1).

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