Properties that are common to all components are described below. Component-specific properties are described in the reference pages for each component.
Note: Some of these settings do not apply to certain components. For those components, the fields are automatically disabled.
Tip: Some settings can also be set using the Appearance Bar.
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.
|On Click (Link)||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.|
|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.
The Appearance settings control the way the component looks, from its stroke and fill to the size of its text.
The buttons at the top allow you to switch between the four Appearance Modes. These modes allow you to change a component’s appearance based on user interactions.
Note: Active mode only applies to some components. For all other components, the button is automatically disabled.
|Stroke Color||Stroke (border) color.|
|Stroke Width||Stroke (border) width, in pixels.
Note: For some stroke styles, the actual border will be a multiple of the stroke width. For example, the “double” style draws two stroke-width lines, with a single stroke-width gap between them.
|Stroke Style||Visual style of the stroke (border).|
|Stroke Sides||The sides of the component’s box that have the stroke (border).|
|Fill Color||Fill (background) color.|
|Fill Image||Fill (background) image for the component.
Tip: Using the button to the left of the field, you can choose to have the fill image centered in the component, tiled (repeated), or stretched to fill it.
|Box Opacity||Opacity of the component, with “0” being transparent and “100” being opaque.
Note: Opacity affects the contents of the component as well.
|Box Rounding||Amount of rounding applied to the component’s corners.
Tip: Use “Full” rounding to make circles and ovals.
|Box Corners||The corners of the component’s box that are rounded.|
|Box Shadow||Drop- or inset-shadow for the component’s box.|
|Text Color||Color of the text.|
|Text Size||Size of the text (in pixels).|
|Text Font||Font to use for the text.|
|Text Style||Style of the text (e.g. bold).|
|Text Decoration||Underline, strike-out, etc. style of the text.|
|Content Padding||Padding for the component’s content, in pixels.|
|Content Sides||The sides of the content that are padded.|
|Content Horizontal Align||Horizontal alignment of a component’s content.|
|Content Vertical Align||Vertical alignment of a component’s content.|
|Cursor||Mouse cursor that will be displayed when hovering over the component.
Tip: Choose “Automatic” to have the cursor determined automatically based on whether the component has an On Click action.
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 stacking based solely on the document 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.|
Use specification details to record additional information about your components. The Name field is used in the component outline.
|Name||Custom, descriptive name.|
|Status||Custom status. 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.
Note: This information can only be accessed in the ProtoShare editor – it is not visible when simply viewing a design.
Use these fields to plan your mark-up.
By assigning a unique identifier, you can create links that scroll to the component’s location on the page when clicked.
|#id||HTML unique identifier.|
|.class||CSS class names. Separate multiple class names with spaces.|