Image Toggle Button

Table of Contents

    Description

    An Image Toggle Button is an Image Button with two states: Checked and Unchecked. Each state can trigger its own set of actions.

    ImageToggleButtonanimated.gif

    There are three other types of Buttons in IntuiFace:

    • Button: use to trigger any action. You can modify its visible text and overall appearance like color and size.
    • Image button: use to run any action. Replaces the Simple button style with any image of your choice. (In fact, you assign two images: one image for when the button is untouched, another for when it is touched.) Can also have a label.
    • Toggle Button: has two states: checked and unchecked. Each state can trigger its own set of actions.

    Toggle button sets

    Same as a simple Toggle Button, Image Toggle Buttons can also be placed in a "set", enabling the creation of radio buttons, multi-tabbed views, etc. See the Toggle Button article for more details.

    Properties, Triggers & Actions

    Properties

    See Common asset properties for details about common properties shared by all asset types

    Appearance

    You can change the label, position, orientation, colors and effects from here. On Image Buttons you can select the pressed and released images.

    State

    • Enabled: disabled buttons will not respond to interaction.
    • Checked: indicates if the toggle button is currently checked or unchecked.

    Images

    • Released checked image: Image displayed when the Image Toggle Button is checked and not being touched.
    • Pressed checked image: Image displayed when the Image Toggle Button is checked and being touched.
    • Released unchecked image: Image displayed when the Image Toggle Button is unchecked and not being touched.
    • Pressed unchecked image: Image displayed when the Image Toggle Button is unchecked and being touched.

    The Pressed images can be the same image as for Released images. However, making the Pressed images - for example - a darker version of the Released images provides the user with helpful visual feedback.

    The image below illustrates the "Appearance" properties for an Image Toggle Button

    toggle_image_button_appearanceproperties.PNG

    Text

    Has the same text properties of the Toggle Button.

    ToggleTextProps.PNG

    Behavior

    Has the same Behavior properties of the Toggle Button

    Triggers

    See Triggers Overview to get details of common triggers shared by all assets or collections

    Has the same Triggers as the Toggle Button

    ToggleTriggers.PNG

    Actions

    See Actions Overview to get details of common actions shared by all assets or collections

    Has the same Actions as the Toggle Button

    ToggleActions.PNG