Creating and Using Components

Tip

To quickly learn the basics of using components in Axure RP, check out the Widgets and Components module of our Core Training series.

Components (formerly Masters) are collections of widgets that you can maintain in a central location and reuse throughout a project. Changes you make to the main component are automatically pushed out to every individual instance of the component in the project.

Elements that are commonly created as components include headers, footers, and navigation bars since they're generally the same on every page of a website or application.

Creating Components

There are two workflows for creating a component:

Create from Widgets

You can create a component from widgets you've already added to the canvas by selecting them, right-clicking, and choosing Create Component in the context menu. The widgets will stay exactly where they are on the canvas, but they'll now be the first component instance of a new main component, listed in the Components pane.

Note

If you want to skip naming components you create from existing widgets, you can check the Don't show again checkbox in the Create Component dialog. You can later uncheck this selection on the Components tab of the application preferences menu.

Creating in the Components Pane

You can also create blank components by clicking the Add Component icon at the top-right of the Components pane.

Editing Components

To edit a component and its contained widgets, double-click its name in the Components pane or double-click any instance of it that you've added to the canvas. The component will open in a new tab on the canvas.

Page-Like Properties of Components

In addition to their contained widgets, components have page-like properties you can configure:

• Canvas color: You can change a component's canvas color to facilitate the design process. For example, you can set the canvas to a dark color when working with light text and widget fill colors.

  This canvas color is only visible when you're editing the main component itself; it does not appear on pages you add a component instance to.

• Page notes: At the top of the Notes pane, you can use the Page Overview field to enter notes about the component itself. You can learn more about working with notes in the Page and Widget Notes article.

• Page interactions: Interactions you create under page-level events inside a main component will fire along with the page events of pages you add a component instance to. For example, if you create a Page Loaded interaction inside the main component, that interaction will take place when a page containing an instance component loads in the web browser.

• Component views: Component views, similar to adaptive views, are alternate versions of a main component that you can create for the different contexts where you expect to use the component. They allow you to create the component once and then rearrange, resize, and restyle its widgets for each of your contexts. To learn more, check out the Component Views article.

Adding Components to the Canvas

To add a component to a page or to another component, drag it from the Components pane and drop it onto the canvas. Component instances on the canvas have a pink border mask. You can toggle the overlay at View → Masks.

Note

Masks are not applied in the web browser.

You can also add a component to multiple pages at once or remove a component from multiple pages at once by right-clicking it in the Components pane and selecting either Add to Pages or Remove from Pages.

Drop Behavior

You can change how each instance of a component behaves when added to the canvas by changing its "drop behavior." To do this, right-click the component in the Components pane and select from the following options under Drop Behavior:

• Place Anywhere (default): Allows you to place instances of the component at any coordinates you want on the canvas.

• Lock to Component Location: Restricts all instances of the component to the exact coordinates of the widgets on the component's own canvas. Furthermore, only one instance of the component can be added to a page or another component since subsequent instances would overlap the first.

  Note

  You can toggle this behavior on an instance-by-instance basis by right-clicking an instance of a component and selecting Lock to Component Location in the context menu.

• Break Away: When placed on the canvas, instances of the component immediately become regular widgets that are no longer linked to the source component.

  Note

  You can also break away individual instances by right-clicking and selecting Break Away in the context menu.

Text and Image Overrides

After adding an instance of a component to the canvas, you can use the Overrides section of the Interactions pane to change the text and images on widgets in the instance.

Note

You must first enter some default text on a widget in a component before the text can be overridden at the page level.

Usage Report

You can quickly see which pages a component has been added to by right-clicking it in the Components pane and selecting Usage Report.

Interactions

As with all other aspects of a component, its interactions and the interactions of its contained widgets exist exclusively within the main component and are consistent across all its instances in the project. If you need an interaction in a component to affect widgets outside the component, or if you want an interaction to work differently for each component instance, use a raised event.