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
The animation below shows how to put 3 toggle buttons in the same "set".
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 user 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
Text
- Text: Visible text in the button. Leave blank if you don't want to display any text.
- Font, Font color, Font size, Bold, Italic, Underline: Text style configuration
- Adapt font size: Toggle whether the font size of text should shrink in order to maintain visibility within the button.
- Minimum font size: The size below which "Adapt font size" will not shrink the text.
- Overflow behavior: Specify how to represent text that cannot be seen within its container because it doesn't fit. Options are:
- Clip: There is no visual indication that additional text is not displayed.
- Ellipsis: Displays a "..." at the end of the visible text.
- Scrollbars: Displays a scrollbar and enables - in Player and Composer's Play Mode - the ability to scroll through text using a swipe gesture.
- Line wrap: Toggles whether entered text will wrap at the end of the line.
- 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
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
- Is pressed: raised when the button is pressed, regardless of state
- Is released: raised when the button is released, regardless of state
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
- Toggle check/uncheck: Check the button if unchecked, uncheck the button if checked
- Disable: disables user interaction
- Enable: enables user interaction
Comments
0 comments
Article is closed for comments.