Perspective - Multi-State Button
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.
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.
| Name | Description | Property Type |
|---|---|---|
| controlValue | Bind this to the Tag that controls the state. (Typically, this is bound to the same location as the indicatorValue property.) | value: numeric |
| indicatorValue | Bind 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).
| 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 |
| defaultUnselectedStyle | Default 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 |
| primary | Toggles between the default primary and secondary button style. | value: boolean |
| enabled | If true, the user is able to interact with the buttons. | value: boolean |
| buttonGap | Space, in pixels, between each button in a group. | value: numeric |
| endButtonCornerRadius | Amount 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 |
Component Scripts and Events​
Further component interaction and functionality can be configured for all components through scripting and event actions. Right-click on the component or select Components from the Designer menubar to access the configuration popups for both of these options:
- Configure Events: Accesses the Event Configuration popup where you can configure actions to run in response to events to make the component dynamic. The Events Configurations page shows how to configure events and actions on a Perspective component.
- Configure Scripts: Accesses the Script Configuration popup where custom methods and message handlers can be added. The Scripting in Perspective section details scripting fundamentals, creating custom methods, and using message handlers.
Examples​
| Property | Value |
|---|---|
| props.indicatorValue | (property binding) |
| props.states.0.text | Open |
| props.states.0.value | 2 |
| props.states.0.selectedStyle.backgroundColor | #FFF809 |
| props.states.1.text | Close |
| props.states.1.value | 0 |
| props.states.1.selectedStyle.backgroundColor | #FF8C00 |
| props.states.2.text | Auto |
| props.states.2.value | 1 |
| props.states.2.selectedStyle.backgroundColor | #62ED2A |
| props.states.3.text | Bypass |
| props.states.3.value | 4 |
| props.states.3.selectedStyle.backgroundColor | #FF0000 |
| props.orientation | row |
| props.buttonGap | 8 |
| props.endButtonCornerRadius | 2 |