Learn to edit the rollover, mouse down, selected, and disabled styles of widgets.
Widget Styles Overview
In addition to the default style, some widgets have additional styles like rollover and selected. When these styles are defined, they are applied to the widget when you interact with it in the prototype. Right click a widget to see which styles are available to edit. These styles include:
Rollover: This style is applied when the user moves the cursor over the widget. (Available for button shapes, images, menus and trees)
Mouse Down: This style is applied when the user clicks down on a widget. (Available for button shapes and images)
Selected: This style is applied when the widget is set to its selected state. (Available for button shapes, images, menus, and trees)
Disabled: This style is applied when the widget is disabled (Available for button shapes and images)
Edit a Widget Style
Right-click the widget and use the context menu to edit the style. For example, Edit Button Shape->Edit Rollover Style.
This opens the Set Style dialog where you can select and set the properties for that widget style.
Tip: After you check a text style like Bold or Italic, toggle the format button to the right to set the property.
To preview the style on the widget in the wireframe, check “Preview”.
To preview the style in the wireframe, interact with the black/white square in the top left corner of the widget. For example, when you mouse down on the black/white square, it shows the mouse down style you applied.
Add Interactions to Set Widget Styles
To set a widget to its selected or disabled style, use the “Set Widget(s) to Selected State” and “Disable Widget(s)” actions. The rollover and mouse down styles are applied automatically and do not an action defined.
Example - Dynamic Button (
RP File |
Prototype )
See an example of a button shape with custom rollover, mouse down, and selected styles where the button is set to its selected style when clicked. Follow the instructions in the file to try it yourself.
Summary
Think you can create a rich, interactive button with a rollover, mouse down, and selected styles? If you have any doubts, let us know at support@axure.com and we can help you out.