Using Appearance Modes

ProtoShare components can respond to some user interactions by changing their appearance. Each set of appearance settings is referred to as an Appearance Mode.

In addition to their normal appearance settings, components can have unique appearance settings when the mouse is over them (Hover mode), when they are active (Active mode), or when the mouse is pressed on them (Click mode). For example, a button’s stroke might change from outset to inset when pressed.

The Active mode is only supported by some components. It generally applies to links representing the current value of a state. For example, you might use the active mode settings on a navigation component to change the color of an active tab.

Tip: Appearance mode settings are “inherited”. For example, the Hover mode settings are applied on top of the Normal settings. This means that you need only change the settings that you wish to be different for each mode.

To edit appearance settings for a specific mode:

  1. Right-click the component and choose Inspect Component from the menu.
    • This show the Component Inspector window.
  2. In the Appearance section of the component inspector, click the button corresponding to the desired appearance mode: “Normal”, “Hover”, “Active” or “Click”.
    • This sets the mode that the fields in the appearance section are editing. If you select any mode other than Normal, the labels of the fields turn yellow, to remind you that they are editing an alternate mode.
  3. Adjust the fields in the appearance section as needed.