Skip to main content
Version: 8.1

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.

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
statesThe 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).
  • text: Text displayed on the button. Value is string.
  • value: Value assigned to the state. Value is numeric.
  • selectedStyle: Style 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.
  • unselectedStyle: Style 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.
  • tooltipText: Determines what test should appear when mouse cursor hovers over the button associated with this property. If blank, no tooltip will appear. Value is string.

    Note: This property is not present by default, and must be added manually.
  • object
    orientationPhysical position of the button: Column or Row.boolean
    defaultSelectedStyleDefault 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
    enabledIf true, the user is able to interact with 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
    styleSets 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

    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