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 three other types of Buttons in IntuiFace Composer:

    • 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.
    • Image Toggle Button: has two states: checked and unchecked. Each state can trigger its own set of actions and can be personalized with images.

    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

    State

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

    Background

    • 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

    The following image illustrates the "Appearance" properties of a Toggle Button

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