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

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.

 

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

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.
Fixed Position	Whether to use Fixed Position settings or not.
Anchor	Whether the Fixed Position is anchored to position it is on the design (automatic) or to the top or bottom of the design.
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

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

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

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.