Skip to end of metadata
Go to start of metadata
General

Component Palette Icon:




Description

The Multi-State button is really a series of two or more buttons, arranged in a column or row. Each button represents an integer-valued state. Each state defines two styles for a button: the selected style, and the unselected style. Each button is automatically displayed with the correct style based on the current state (the value of Indicator Value). When a button is pressed, its state's value is written to the Control Value. 

When the Multi-State Button is dragged to a container, it is pre-configured with 'defaultSelectedStyle' and 'defaultUnselectedStyle properties'. These styles can be changed or deleted.

This feature is new in Ignition version 8.1.2
Click here to check out the other new features

The Multi-State Button component has two pre-configured variants:

  • Column - Default layout with options in a column format.
  • Row - Layout with options in a row format.
Properties

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective.
This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

NameDescriptionProperty Type
controlValueBind this to the Tag that controls the state. (Typically, this is bound to the same location as the indicatorValue property.)value: numeric
indicatorValueBind this to the Tag that indicates the current state. (Typically, this is bound to the same location as the controlValue property).value: numeric
states

The value that will be written to controlValue when any of the buttons are clicked. Shows a list of the possible states for the component. You can add, remove, and the change the order of each state listed. Each state has two default visual styles applied for each button: Selected Style and Unselected Style. The Multi-State Button has default visual styles defined for both the selectedStyle and unselectedStyle. (Refer to 'defaultSelectedStyle' and 'defaultUnselectedStyle' properties in this table).

 Click here to see states properties
NameDescriptionProperty Type
textText displayed on the button.string
value Value assigned to the state.value: numeric
selectedStyleStyle settings for the button when it is selected. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object
unselectedStyleStyle settings for the button when it is not selected. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.  object
object

orientation

Physical position of the button: Column or Row.

boolean

defaultSelectedStyle

Default selected style. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.

object
defaultUnselectedStyleDefault styles for unselectedStyles when any of the buttons are not selected. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object
primaryToggles between the default primary and secondary button style.

value:

boolean
enabled

If true, the user is able to interact with the buttons.

Note: If the component is disabled, scripts can still run on the component. For example, if you add a script action to the onClick event, the script will fire when the user clicks on the buttons.

value:

boolean
buttonGapSpace, in pixels, between each button in a group.

value: numeric

endButtonCornerRadiusAmount to round the end of the corners of the first and last button.

value: numeric

style

Sets a style for this component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.

object

Perspective Component Events
The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Component Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

Example

PropertyValue
props.indicatorValue(property binding)
props.states.0.textOpen
props.states.0.value2
props.states.0.selectedStyle.backgroundColor#FFF809
props.states.1.textClose
props.states.1.value0
props.states.1.selectedStyle.backgroundColor#FF8C00
props.states.2.textAuto
props.states.2.value1
props.states.2.selectedStyle.backgroundColor#62ED2A
props.states.3.textBypass
props.states.3.value4
props.states.3.selectedStyle.backgroundColor#FF0000
props.orientationrow
props.buttonGap8
props.endButtonCornerRadius2


  • No labels