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.
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.
|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 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.
|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 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:
|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 settings are described on the Appearance Settings page.
Position and Size
These settings control the position, size and layout of the component.
|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.|
Use specification details to add information about your component to a word export. The Name field is also used in the Component Outline.
|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.|
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.
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.
|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.|