Axurerp7.0 basic tutorial series parts details H1, H2, label, paragraph, placeholder, rectangle

Prototype library website-Original release of lecturer Jin Wu, which can be freely reproduced. Please indicate the source!

Axure Official Website: www.axurerp.cn

 

Axurerp7.0 parts details

 

H1, H2, label, paragraph, placeholder, rectangle

 

Example:

 

Navigation buttons


Website navigation shape buttons are often used to create navigation buttons to link to other pages. These buttons are often used in the page header, sidebar, footer, and application.

Header, label, and content

H1, H2, label, and text are shapes. You can edit the default label and text style in the part style manager.

Tag control button

The shape button can be used to create the label shape and rounded rectangle.

 

 

Edit shape button:

Add text

Select the shape button and edit it. You can also double-click the shape button to add text.

Select shape

Text and shape button parts can change various shapes, including rectangles, triangles, ovles, labels, water drops and arrows. Select the widget and click the gray circle in the upper-right corner of the widget to select the shape. You can also select a shape in the component properties panel.

 

Shape format

The shape allows you to edit the font, font size, font color, bold, italic, and underline in rich text formats, and change the alignment mode. You can also change the fill color, line color, line width, and line mode. To change the shape format, click set in the toolbar format on the top of the control.

 

Specify custom styles

The part style editor allows you to centrally manage your components, including the shape format. For example, if you have created a blue button style and assigned it to some shape buttons, you can modify the fill color in the part style manager later, in this way, all the shape buttons that use the blue button style will be updated to the latest style.

Add hover, selected style, and more

The shape button allows you to add interactive styles when you hover, press, select, and disable a widget. Right-click a widget and select an interactive style. The interactive Style dialog box is displayed. You can add any available formats and styles. Once a style is submitted, a small block consisting of black and white is added in the upper right corner of the part in the design area. You can hover the cursor over the small block to preview the interactive style.

 

Specify the shape button to the selection group

The effect is similar to that of a single-choice button group. When a shape button in the group is selected, all other shape buttons in the group are switched to the default style.
Select the shape Button widget to be added to the widget group, right-click it, and choose -- set the widget group name, or set the widget group name at the bottom of the widget properties panel.
Note: You need to add the selected widget to each widget group for normal operation!

 

Rounded corner

You can use the shape button to add a rounded corner. To add a rounded corner effect, select the shape button and drag the *** triangle in the upper left corner of the widget to adjust the radius of the rounded corner.

 

Convert shape/text to image

If you want to replace the shape button with an image and retain the comments and interactions on the Shape button, you can use the convert to image function.
Right-click the desired shape button, select convert to image, and double-click the image to import the desired image.

 

Adaptive width and height

The component with adaptive attributes is used to adapt the width and height of the text content, replacing the specified size and text line feed.
To set the adaptive width and height shortcut, double-click the resize handle. Double-click the Left and Right handles automatically adjust the width, double-click the upper and lower handles automatically adjust the height to adapt to its content height.

 

Shadow

By adding external shadows, internal shadows, and text shadows, you can increase the fidelity of the prototype.
To add a shadow, you can set it in the toolbar and Widget style panel on the top.

Shape opacity

To set the opacity of the Shape button part, set the opacity value in the part style Panel, such as 50% (smaller value, higher transparency)

 

Common shape button Interaction
Click to go to other pages

Click the button to assign a value to the variable.

Click the button to set the dynamic panel status of other pages.

Limitations of shape buttons

Custom button icon
The icon cannot insert a shape button part. However, you can overwrite an icon to create a button icon on the Shape button part. You can add interactions to icons and shape buttons, or overwrite an image heat area to add interactions to the image heat area.

 

Separate border Style

There is no way to set styles for different borders of the Shape button. One solution is to draw a border using a horizontal or vertical line. For example, if you create a shape button, the top line is set to white, and the left and right lines and the bottom lines are set to black.

Draw a vector chart

Generally, you can combine the lines and shapes to be close to the desired shape, but there is no pen tool to draw a custom shape. One solution is to use a vector graph rendering tool, such as PS. After creating an image, copy and paste it to axure or import the image.

Copy shape styles

When copying a shape button, the shape style is also copied. You can also copy the style with a style brush and paste it to other specified parts.

Differences between shape buttons and rectangles

The rectangle and the shape button are identical parts, but the default appearance is different. The shape button adds the rounded corner effect, but the rectangle does not.

Axurerp7.0 basic tutorial series parts details H1, H2, label, paragraph, placeholder, rectangle