GROUPS

© 2002-2017 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

GROUPING AND UNGROUPING

You can group widgets by selecting them and doing any of the following:


• Right-click and select “Group”

• Use the keyboard shortcut [CTRL] / [CMD] + [G]

• Use the “Group” icon in the Main Toolbar


When you create a group, it will appear in the Outline as a folder. The widgets inside the group are in that folder. To remove one widget from a group, find it in the Outline and drag it out of the group's folder.


To ungroup an entire group, select that group and then do any of the following:


• Right-click and select "Ungroup"

• Use the keyboard shortcut [SHIFT] + [CTRL] / [CMD] + [G]

• Use the "Ungroup" icon in the Main Toolbar

EDITING

EDITING A GROUP AND ITS CONTENTS

With a group selected, use the Inspector to name the group and configure its properties. Editing the style properties of a group will apply styling changes to all the widgets in the group. Resizing a group resizes the widgets in the group if possible, though widget types that can't be resized on the canvas (e.g. repeaters) won't be resized this way.


To edit individual widgets in a group, first click the group to select it and then click again on the widget you want to edit. You’ll see a grey mask cover everything on the page except the widgets inside the group. While in this mode, you can: move, resize, and style widgets in the group; add widgets to the group by dragging them from the widgets pane; and delete widgets. Click anywhere outside the group to leave group editing mode.


You can also use the Outline pane to drag and drop widgets into and out of a group.

LOCATION, SIZE, AND ROTATION

To move a group, drag and drop it into place or use the arrow keys to nudge. You can also choose the exact location of a group using the "x" and "y" fields in the top toolbar or in the Inspector’s Style tab.


When a group is selected, a grey border is drawn around it. Handles on the border can be dragged to resize the group. To resize a group proportionally when resizing via the handles, hold the [SHIFT] key while dragging. Groups always fit exactly to their contents, so resizing a group will reposition the contained widgets and will also resize them as allowable per widget type.


Groups can also be resized to a specific pixel value. Use the “w” and “h” fields in the top toolbar or Style tab to set the widget size in pixels. To constrain the widget’s proportions, click the “Maintain aspect ratio” icon between the “w” and “h” fields.


Rotate a group by holding [CTRL] / [CMD] while clicking a corner handle of the group. Drag to set the angle of rotation. Only widget types that can be rotated will rotate; other types (e.g. text fields) will move but not rotate. You can also enter an exact degree of rotation in the "R°" field of the Inspector's Style tab. Text can be rotated to a different angle using the "T°" field in the Style tab.

STYLING

From the Inspector's Style tab you can edit some styling properties of the widgets contained in the group. Note that the changes will affect all applicable widgets. To style the contained widgets separately, do a slow double-click to enter the group and then select each widget to style it.

INTERACTIVITY

TRIGGERING MOUSE INTERACTION STYLES

In the Properties tab, you’ll find an option to “Trigger Mouse Interaction Styles”. With that option selected, the interaction styles for each widget in the group will be applied when the trigger action occurs for any widget in the group. For example, mousing over any widget in the group will set all of the widgets in the group to their MouseOver style.

LINKS

The quickest way to add a link to a group is to select the group and click "Create Link" in the Interactions tab. A list of pages in the project will appear. Click on the name of target page to create the link and close the dialog. Learn more about creating interactions here.

SELECTION GROUPS

With selection groups you can create a relationship among a group of widgets or groups such that only one member of the selection group at a time can be set to its selected state. When any member of the group is selected, all others are automatically deselected.

 

Use the "Selection Group" field in the Properties tab to add a group to a selection group. To add a new selection group to the page, type a name in the field. You can also choose an existing selection group from the dropdown. To remove a group from a selection group, delete the selection group's name from the "Selection Group" field.

When you have several widgets you'd like treat as one item for purposes of moving, editing, or applying interactions, you can group them. Instead of working with each widget separately, you can work with the group to affect all its contained widgets.

INTERACTIONS ON GROUPS VS CONTAINED WIDGETS

You can add interactions for groups in the Properties tab of the Inspector, just like you can for individual widgets. If you add an OnClick interaction, clicking any widget in the group will trigger that interaction unless an OnClick interaction exists on the widget. In that case, the OnClick interaction on the widget would be performed instead of the one on the group.

TARGETING GROUPS WITH ACTIONS

Actions can be applied to groups. When configuring actions like "Show/Hide Widget" you can choose a group to show or hide instead of an individual widget.