Toggle Button

Table of Contents

    Description

    A Toggle button is a button with two states: checked and unchecked. Each state can trigger its own set of actions.

    There are two types of Toggle Buttons in IntuiFace Composer:

    • Simple Toggle Button: executes one or more actions through use of the "Checked" and "Unchecked" triggers. You can modify its visible text and overall appearance (such as color and size).
    • Image Toggle Button: Same as above plus images of your choice to skin it. If you choose this variant of the Toggle Button, you need to reference 4 pictures for respectively skinning the checked state, pressed-checked state, unchecked state and the pressed-unchecked state.

    Toggle button sets

    Toggle Buttons can also be placed in a "set", enabling the creation of radio buttons, multi-tabbed views, etc.. When in a set, one and only one Toggle Button can be checked at a time. Whenever one Toggle Button is checked, all other buttons in the set are unchecked automatically. The following image shows two Toggle Buttons in a set.

    Uses for Toggle Buttons include:

    • Flip the visibility of any asset or collection
    • Add checkboxes in forms
    • Play/pause a video
    • Create a tabbed view with each button causing the display of different content
    • Enforce the exclusive selection of one among many options

    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. For Image Buttons you can select the pressed and released images.

    For the following, different properties are available depending on the choice of button style.

    State

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

    Background [for Simple Button only]

    • Fill color: color of the interior of the button. Setting the Opacity to 0 will eliminate all color.
    • Outline color: color of the outline of the button. Setting the Opacity to 0 will eliminate all color.
    • Pressed color: color of the pressed state of the button. Setting the Opacity to 0 will eliminate all color.
    • Radius: roundness of the corners. A radius of 0 will square the corners
    • Flat: toggle whether fill color should have a gradient effect
    • Shadow: toggle whether the button is given some three dimensional depth

    Images [for Image Button only]

    • 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 on the left illustrates the "Appearance" properties for Simple Toggle Button while the image on the right shows the "Appearance" properties for Image Toggle Button

    ToggleProps.png

    Text

    • Text: Visible text in the button. Leave blank if you don't want to display any text.
    • Font size
    • Font color
    • Font
    • Bold
    • Italic
    • Underline
    • Line wrap
    • Horizontal alignment: Horizontal placement of text: Left, Center, or Right
    • Vertical alignment: Vertical placement of text: Top, Center, or Bottom
    • Margin: Margin width in pixels

    ToggleTextProps.PNG

    Behavior

    Exclusive Behavior

    • Member of Toggle set   Specify whether this particular Toggle Button should be placed in a Toggle Button set. For buttons in a set, one and only one can be checked at a time. When one is checked, all others are unchecked. Toggle Button sets can include buttons located across multiple spaces.
      If checked, the following properties appear:
      • Toggle set   Name to the Toggle Button set. Type a name or use the dropdown to select a set already defined in the experience.
      • Allow uncheck of all buttons   Specify whether it should be possible for all Toggle Buttons in a set to be unchecked. If not selected, this property forces one Toggle Button in the set to be checked at all times.

    Triggers

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

    • Is checked: raised when the button is switched to the ON state
    • Is unchecked: raised when the button is switched to the OFF state

    ToggleTriggers.PNG

    Actions

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

    • Check: switch the toggle button to the ON state
    • Uncheck: switch the toggle button to the OFF state
    • Disable: disable the toggle button
    • Enable: enable the toggle button

    ToggleActions.PNG