LINE WIDGETS

MORE RESOURCES

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

86% OF THE FORTUNE 100

USE AXURE RP

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

EXAMPLE USES

AS A SEPARATOR

Create a visual separator between areas of a diagram.

ARROWS AND LINE ENDS

Line ends can be changed into arrowheads and other symbols. (The arrow widgets in the Markup section of the Default library are pre-styled line widgets.)

EDITING

LINE ENDS

Use the Arrow Style button in the Style tab to change the line end style. With the line selected, click the Arrow Style icon and select your desired style choices for the left and right ends of the line.

LINE WIDTH AND STYLE

Lines can be given colors, width, and line patterns. With the line selected, chose a color, width, or pattern from the Border section of the Style tab.

ADD TEXT

Double-click a line widget to edit its text. (Double-clicking gives you access to the most common editing function for each widget type.) If you want to add new text to a line widget, you can just begin typing while the widget is selected.

LOCATION AND SIZE

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


When a widget is selected, a green border is drawn around it. Handles on the border can be dragged to resize the widget. Widgets can also be resized to a specific pixel value. Use the “w” field for a horizontal line and “h” field for a vertical line in the top toolbar or Inspector to set the widget size in pixels.


Rotate a widget by holding [CTRL] / [CMD] while selecting a corner handle on a widget. Drag to set the angle of rotation. You can also enter an exact degree of rotation in the "R°" field of the Style tab. Text can be rotated to a different angle using the "T°" field in the Style tab.

FONTS, COLORS, BORDERS, AND SHADOWS

Editable properties of a line widget's formatting include: text font and family; line and text colors; border color and thickness; inner, outer, and text shadows; and widget opacity. These properties can all be controlled from the Style tab of the Inspector, and many are also available in the Style Toolbar at the top of the interface.


You can set the thickness, color, and pattern of the line.


Inner and outer shadows can each be added. Open a shadow menu and click the checkbox to add that type of shadow. The offset (measured in pixels) can be specified in both the "x" and "y" directions. The blur and color of the shadow are also set here. Inner shadows also have a "spread" setting that determines the size of the shadow.


Specify the opacity of a widget in the Style tab. By default, widgets are 100% opaque. Note: widget opacity is a separate property from border or text opacity, each of which can be set in their respective color pickers.

INTERACTIVITY

INTERACTION STYLES

Interaction styles are alternative sets of style properties (e.g. color, border, font weight) which are applied in certain situations, for example after a widget is clicked.


Widgets can have the following interaction styles:


MouseOver: When the cursor moves over a widget

MouseDown: When the widget is clicked on but not yet released

Selected: When an interaction has set the widget to its selected state

Disabled: When an interaction has set the widget to its disabled state


In each scenario, the alternative look you've configured for that interaction style will be applied to the widget. If you haven't set up a given interaction style, the widget's look will remain unchanged during that interaction.


The interaction styles of each widget are configured in the Properties tab. Click the name of an interaction style to open the "Set Interaction Styles" dialog. Check the checkbox next to a style property and configure it to add it to the overall interaction style. In addition to choosing from specific style properties, you can also choose to apply a widget style as an interaction style.

LINKS

The quickest way to add a link to a line widget is to select the widget 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 such that only one widget at a time can be set to its selected state. When any widget in the group is selected, all others are automatically deselected. A deselected widget will revert to its base style.

 

Use the "Selection Group" field in the Properties tab to add a widget 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 group from the dropdown. To remove a widget from a selection group, delete the group's name from the "Selection Group" field.

CURVED LINES

Use the pen tool to draw curved lines. Add a line widget, right-click it, and select "Convert To Custom Shape". Click the middle of the line to add a point, then drag that point up or down to angle the shape. Double-click the point to curve the line.


You can also draw a new shape as a curved line. To learn how to use the pen tool, check out our Pen tool article.