Reproduced Axurerp 7 Parts (i)

This article is the Axure RT7.0 tutorial, this chapter mainly introduces the menu, table table, tree widget three parts, follow-up will continue to update ...

Menu

Common cases

Site Navigation
The menu part is usually used in the motherboard to jump to different pages in the prototype.

Edit Menu
To edit the menu, right-click on the Popup context menu to select New menu item before/After, delete menu, Add submenu.

Menu style
Use the toolbar or part Styles panel to Edit menu styles, such as fill color, font color, font size, and so on, to be aware that submenus are obtained from the parent menu.
To customize the menu style, see pop-up menu cases

Interactive styles for menus
Menu can add interactive styles: hover/Mouse Down/Select, select the menu you want to add style to (you can CTRL + Select) Right-click the interaction style, or set it in the part properties.
It is important to note where the interaction style of the setting is applied. such as: Only the menu item, the menu only, the menu, and all submenus.
Case download
View Demo

Common interactions

Click the menu item to open a new page
Using a menu item to link to another page or external link is the most common way to use it.

Limitations of Menu Parts
1. Icons and widgets cannot be embedded. However, you can do this by creating a custom menu.
2. You cannot click to expand the submenu. The menu widget is the default mouse hover display submenu.

Tabel form

Organization data
This is typically used to dynamically display data in a cell by interacting (such as clicking the mouse).

Add/Remove rows and columns
To add a row/column, select the cell by right-clicking and selecting Insert/delete row or column from the context menu.

Add/Remove Rows or columns
To add/remove rows or columns from a table, hover over the top or side of the list, and then right-click when the mouse turns into a small black triangle and select Add/Remove Rows or columns.

Fill form contents to table
Dynamically passing the contents of a text input box to a table is a common way. The event on the Submit button uses a local variable when the mouse clicks to set the text of the cell = text in the input box.
Case download
View Demo

Click the cell display panel
Similar to the example above, click the Edit button to display the dynamic panel containing edits, re-edit and click the Submit button, the cell content changes, dynamic panel hidden.
Case download
View Effects

Interactive styles
The cells in the table can be set with the mouse hover/mouse down/Selected interaction style, right click on the selected cell (you can press CTRL for multiple selection at the same time), and then set the interactive style in the part properties panel.

Limitations of the table
1. Mouse click cell cannot enter text, cell default to double-click to enter text. To implement the click Input text state, you can use the text Field part to override the cell.
2. You cannot add multiple rows or columns at the same time, and the table allows you to add only one row or column at a time.
3. You cannot add rows or columns dynamically. If you want to use the dynamic Add Row/column feature, use the repeater part repeater.
4. The data in the table cannot be sorted and filtered.

Tree Widget Widget

File browsing
A tree widget can be used to simulate a file browser, and clicking on a different node will hide and show the different states of a dynamic panel.
When there is too much interaction within a page, clicking on a tree node is often used to jump to a new page.

Edit Tree Node

Add/Remove tree nodes
Right-click on a node and in the pop-up menu you can add/remove/move nodes. Adding child nodes will be added to the next layer of the node.
Added before/After the node, is a sibling node.

Add tree node icon
Add a custom icon to your tree widget, right-click on a node and select the Edit icon, import an icon, and select Apply to: the node/sibling node or the node, sibling node, and all child nodes. Close the dialog box, then right-click the tree-edit tree properties and tick the display icon in the pop-up window.

Custom Expand/Shrink Icons
Right-click the Edit Tree property to customize the expand/Shrink icon in the popup dialog box or in the Widget Properties panel.

Interaction styles for tree nodes
Tree nodes can be added when the mouse hovers/mouse down/Selected style, right click on the tree node to select the interactive style, or set in the part properties panel.
Case download
View Effects

Limitations of tree Parts
1. The border containing the tree part cannot be custom formatted. If you want to make a custom tree widget, use the dynamic panel combination to create the effect you want.
2. Tree nodes can upload icons, but cannot dynamically hide/show parts embedded in tree nodes.

This article for the author Sun Posting, reproduced please note that from everyone is product manager and attached this article link: Tutorial AxureRP7.0 Parts Detailed (i)"

Reproduced Axurerp 7 Parts (i)