Axure Course · Axure Promotion · Axure Tutorial · Axure Widget · Components · Elementary · Learn axure · Jul 31, 2022

Axure Tutorial: Components

by WELLJOE

Introduction

This article is a part of course Axure Full Course: Tutorial, Tips and Templates.

When designing, if there are frequently used Widgets, you can make them into Components (formerly Masters) to quickly reuse them and save your designing time.

Components, just like widgets in the widget library, but it is only used for the current project.

Make Widget into Component

There are two main ways to make widget into component:

1. The first is to select widgets, right-click, and select the Create Component option.

2. The second is to create it directly on the Components pane. Click the Add button to create a new blank Component.

Then you can add Widgets into component canvas.

Delete, Rename, Duplicate, Reorder Components

Select the component and right-click to perform the above operations on the component in the context menu.

You can also directly use the mouse and keyboard to operate the component, select the component, click the Delete key to delete it, click it again to rename the component, drag it to change its order, Command(Ctrl) + D keys to duplicate it.

You can also add folders to the component pane to organize components hierarchically.

Components Views

Similar to the adaptive views of page, a component also have views to adapt to different scenes.

By selecting different Views, you can adjust the content or style of the component.

Change views

Component Instance

Isolate Radio Groups: If you have multiple components on a canvas, and the radios in these components are all set to the same Radio groups. You can isolate radios in different components so they don't affect each other.

Isolate Selection Groups: Same as above, you can isolate Selection Groups in different components.

Overrides
If you add component instances to the page, and these components have images or text, you can override the text or images in these components.

Override text and image

Create Component Views
In the component canvas, click +Add Components Views to pop up the Components Views window. You can add, delete, and edit Component views on it.

Component views Inheritance chain
All views follow inheritance rules, child views will inherit the content of the parent view, and the parent view will not inherit the content of the child views.

You can refer to the page adaptive views. The principle is the same, so I won't go into details here.

Remove Views
In the component canvas, click the Remove Views button to remove all component views of the current Component.

Drop Behavior

When adding an instance of a component to a page, you may have different expectations for the behavior of the component. If you want to change the all instances of a component when editing the component, you can use the default Drop Behavior(Place Anywhere);

If you want to fix the position of the component, you can choose Lock to Component Location.

If you want to edit this component without changing the instance of the component, you can choose Break Away.

Drop Behavior of a component

Raise Event

If you set the Drop Behavior of a component to Place Anywhere, then all component instances will have the same behavior. For example, the interaction of the buttons.

If you want to manipulate widgets outside a component when interacting with the widget inside the Component (the outside object manipulated by each instance is different), you can use Raise Event.

Add Raise Event
Enter the component canvas, select one of the widgets, add interaction to it, select Raise Event Action, and then add Raised event. You can add and select multiple Raised events.

Add raised events in component canvas

Then on the page where the component instance mentioned above is added, select the component instance, add Raised Event (View Site), and choose to show hidden content to show the widget outside the component.

Use Raised event in page canvas