General Settings

General settings that are common to all components are described below. Component-specific settings are described in the reference pages for each component.

Note: Some of these settings do not apply to certain components. In those cases, the fields are automatically disabled.


Visibility Inspector

Visibility

The visibility section is used along with States to show and hide components, and to configure animations that happen when a component is hidden or revealed.

Name Description
Visibility Whether the component is visible or hidden.
Only When Conditions (state values) under which the Visibility setting should be applied.
On Show Animation to use when the component is shown.Tip: Choose “Automatic” to use the inverse of the hide animation (if one is set).
On Hide Animation to use when the component is hidden.Tip: Choose “Automatic” to use the inverse of the show animation (if one is set).

Actions

Actions are used to allow a user to trigger changes to State values, which can show and hide components.

Normally, actions are triggered by mouse clicks, but you can choose to use touch events instead where available. Some components like State Navigation or native elements like select and other form elements do not offer touch events, because those elements already have native behavior for touch events.  They will function properly without adding touch event actions.  For more information, see Using Touch Events.

Name Description
Use Touch Events Controls whether the component responds to touch events (rather than mouse events). (Only available on components that need additional touch support)
On Click — Link Page, Asset, or URL to link to when the component is clicked.
On Click — States State values to apply when the component is clicked.
On Hover State values to apply when the mouse enters the component and remove when the mouse leaves it.  This action combines Mouse-over and Mouse-exit behavior.
On Mouse-over State values to apply when a mouse moves over a component.  This is similar to On Hover, however the states do not automatically revert when the mouse exits the component.
On Mouse-exit State values to apply when a mouse exits a component.
On Double-Click State values to apply when the component is double-clicked.
On Right-Click State values to apply when the component is right-clicked.Tip: Use this to simulate a context menu.

Touch Actions

Touch actions use touch based events for better mobile support.  Some components do not support touch events.  These components will work with mobile without any need to configure touch events.  Touch actions should work in most desktop browsers as well, using the mouse instead of a touch.

touch

Touch Event Actions

 

Choosing ‘Use Touch Events’ allows access to the following actions:

Name Description
Use Touch Events Controls whether the component responds to touch events (rather than mouse events).
On Tap – Link Page, Asset, or URL to link to when the component tapped (touch and release)
On Tap  — States State values to apply when the component is tapped.
On Touch State values to apply when the component is touched.  When the touch is released, these states will be removed.
On Touch and Hold State values to apply when a component is touched for longer than 1 second.
On Any Swipe State values to apply when a finger swipe is detected on this component.
On Swipe Left State values to apply when a right to left finger swipe is detected on this component.
On Swipe Right State values to apply when a left to right finger swipe is detected on this component.
On Swipe Up State values to apply when an upward finger swipe is detected on this component.
On Swipe Down State values to apply when a downward finger swipe is detected on this component.

Appearance

Appearance settings are described on the Appearance Settings page.


Position and Size Inspector

Position and Size

These settings control the position, size and layout of the component.

Name Description
X Horizontal position of the component, relative to the left edge of the design.
Y Vertical position of the component, relative to the top of the design.
Z Back-to-front position of the component. This overrides the normal stacking order of the component (as shown in the Component Outline). Clear this field to have the position based solely on the stacking order.
Width Width of the component. Clear this field to have the width determined automatically based on the component’s content.
Height Height of the component. Clear this field to have the height determined automatically based on the component’s content.
Clip Contents Whether to clip the component’s contents to its bounding box, rather than allowing the contents to spill out.
Show Scrollbars Whether to show scrollbars.Choose “Never” if you wish to prevent scrolling of a component’s content, or “Always” if you wish to force scrollbars to appear regardless of the content size.
Item Horizontal Spacing * Horizontal spacing between items.
Item Vertical Spacing * Vertical spacing between items.
Max Columns * Number of items that are in each row.

* These settings are only available for components that consist of multiple sub-items, such as navigation and radio button groups.


Specification Details Inspector

Specification Details

Use specification details to add information about your component to a word export.  The Name field is also used in the Component Outline.

Name Description
Name Custom, descriptive name. Appears in the Component Outline and export document.
Owner Project member who “owns” the component. The meaning of ownership is up to you and your development process.
Status Custom status value. Use whatever is appropriate for your development process.
Priority Custom priority. Use whatever is appropriate for your development process.

Notes Inspector

Notes

Specify important information about the component, and share your thoughts with other developers. You can choose to include the notes in a Word-document export by selecting the Component Details option when exporting.


Mark-up Inspector

Mark-up

Use these fields to assist you when using the project Style Sheet. By assigning a unique ID or a class name, you can create style rules that apply to the component.

Name Description
Wrapper #id Component wrapping element CSS ID.
Wrapper .class Component wrapping element CSS class names. Separate multiple class names with spaces.
Content #id Component content element CSS ID.
Content .class Component content element CSS class names. Separate multiple class names with spaces.