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.

---

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.

Name	Description
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.

---

Appearance

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.

Name	Description
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.

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 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.

* 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 record additional information about your components. The Name field is used in the component outline.

Name	Description
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.

---

Notes

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.

---

Mark-up

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.

Name	Description
#id	HTML unique identifier.
.class	CSS class names. Separate multiple class names with spaces.