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 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.
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 |