本文為Axure RT7.0教程，本章主要介紹menu菜單、table表格、Tree Widget 樹部件三個(gè)部件，后續(xù)將持續(xù)更新

Menu 菜單

常用案例

網(wǎng)站導(dǎo)航

菜單部件通常用于母板之中，其目的是在原型中跳轉(zhuǎn)到不同頁面。

編輯菜單

要編輯菜單，右鍵點(diǎn)擊在彈出的上下文菜單中選擇 在之前/之后新增菜單項(xiàng)、刪除菜單、新增子菜單。

菜單樣式
使用工具欄或部件樣式面板可以編輯菜單樣式，如填充顏色，字體顏色，字體大小等，需要注意的是子菜單是通過父菜單獲取格式的。
要自定義菜單樣式，參見 彈出菜單案例

菜單的交互樣式

菜單可以添加交互樣式：鼠標(biāo)懸停時(shí)/鼠標(biāo)按下時(shí)/選中，選擇要添加樣式的菜單（可以按住Ctrl多選）右鍵選擇交互樣式，或者在部件屬性中設(shè)置。
需要注意的是，設(shè)置的交互樣式被應(yīng)用到哪里。如：僅該菜單項(xiàng)、僅該菜單、該菜單及所有子菜單。

案例下載

查看演示
常用交互

點(diǎn)擊菜單項(xiàng)打開新頁面

使用菜單項(xiàng)鏈接到其他頁面或外部鏈接是使用最普遍的方式。

菜單部件的局限性

1. 無法嵌入圖標(biāo)和部件。但是，你可以通過創(chuàng)建自定義菜單來實(shí)現(xiàn)。

2. 無法點(diǎn)擊展開子菜單。菜單部件默認(rèn)是鼠標(biāo)懸停展示子菜單的。

Tabel表格

組織數(shù)據(jù)

通常用來通過交互（如點(diǎn)擊鼠標(biāo)）在單元格中動(dòng)態(tài)顯示數(shù)據(jù)。

添加/刪除行和列

要添加行/列，選擇單元格點(diǎn)擊右鍵，在上下文菜單中選則插入/刪除行或列。

添加/刪除行或列

要增加/刪除表格的行或列，請(qǐng)將鼠標(biāo)懸停在列表的頂部或側(cè)面，當(dāng)鼠標(biāo)轉(zhuǎn)變?yōu)楹谏∪菚r(shí)點(diǎn)擊右鍵，選擇增加/刪除行或列。

填充表單內(nèi)容到表格

將文本輸入框的內(nèi)容動(dòng)態(tài)傳遞給表格是一種常用方式。提交按鈕上的事件使用了局部變量，當(dāng)鼠標(biāo)點(diǎn)擊時(shí) 設(shè)置 單元格的文本 = 文本輸入框中的文本。

案例下載

查看演示

點(diǎn)擊單元格顯示面板

和上面的例子相似，點(diǎn)擊編輯按鈕顯示含有編輯內(nèi)容的動(dòng)態(tài)面板，重新編輯后點(diǎn)擊提交按鈕，單元格內(nèi)容改變，動(dòng)態(tài)面板隱藏。

本帖分享可見的內(nèi)容

案例下載

查看效果
交互樣式

表格中的單元格可以設(shè)置 鼠標(biāo)懸停時(shí)/鼠標(biāo)按下時(shí)/ 選中的交互樣式，右鍵點(diǎn)擊選中的單元格（可以同時(shí)按下Ctrl進(jìn)行多選），然后在部件屬性面板中設(shè)置交互樣式。

表格的局限性

1.鼠標(biāo)單擊單元格無法輸入文字，單元格默認(rèn)要雙擊才可以輸入文字。要實(shí)現(xiàn)單擊輸入文字狀態(tài)，可以使用 Text Field 部件覆蓋在單元格上面。

2.不能同時(shí)添加多行或多列，表格只允許每次添加一行或一列。

3.不能動(dòng)態(tài)添加行或列。如果你希望使用動(dòng)態(tài)添加行/列功能，請(qǐng)使用 中繼器部件Repeater.

4.不能對(duì)表格中的數(shù)據(jù)進(jìn)行排序和過濾。

Tree Widget 樹部件

文件瀏覽

樹部件可以用來模擬一個(gè)文件瀏覽器，點(diǎn)擊不同的節(jié)點(diǎn)將隱藏和顯示一個(gè)動(dòng)態(tài)面板的不同狀態(tài)。
當(dāng)一個(gè)頁面內(nèi)有太多交互的時(shí)候，點(diǎn)擊樹節(jié)點(diǎn)也常被用來跳轉(zhuǎn)到新頁面。
編輯樹節(jié)點(diǎn)

添加/刪除樹節(jié)點(diǎn)

右鍵點(diǎn)擊一個(gè)節(jié)點(diǎn)，在彈出菜單中你可以添加/刪除/移動(dòng)節(jié)點(diǎn)。添加子節(jié)點(diǎn)將會(huì)添加到該節(jié)點(diǎn)的下一層。
在該節(jié)點(diǎn)前/后添加，是同級(jí)節(jié)點(diǎn)。

添加樹節(jié)點(diǎn)圖標(biāo)

給你的樹部件添加自定義圖標(biāo)，右鍵點(diǎn)擊一個(gè)節(jié)點(diǎn)并選擇編輯圖標(biāo)，導(dǎo)入一個(gè)圖標(biāo)，并選擇應(yīng)用到：該節(jié)點(diǎn)/同級(jí)節(jié)點(diǎn)或該節(jié)點(diǎn)、同級(jí)節(jié)點(diǎn)和所有子節(jié)點(diǎn)。關(guān)閉對(duì)話框，然后右鍵點(diǎn)擊樹 — 編輯樹屬性，在彈出窗口中勾選 顯示圖標(biāo)。

自定義展開/收縮圖標(biāo)

點(diǎn)擊右鍵 — 編輯樹屬性，在彈出的對(duì)話框中或部件屬性面板中，可自定義展開/收縮圖標(biāo)。

樹節(jié)點(diǎn)的交互樣式

樹節(jié)點(diǎn)可以添加鼠標(biāo)懸停時(shí)/鼠標(biāo)按下時(shí)/選中時(shí)的樣式，右鍵點(diǎn)擊樹節(jié)點(diǎn)選擇交互樣式，或者在部件屬性面板中設(shè)置。

本帖分享可見的內(nèi)容

案例下載

查看效果
樹部件的局限性

1. 包含樹部件的邊框不能自定義格式。如果想制作自定義的樹部件，請(qǐng)使用動(dòng)態(tài)面板組合可以制作出你想要的效果。

2. 樹節(jié)點(diǎn)可以上傳圖標(biāo)，但是不能動(dòng)態(tài)隱藏/顯示嵌入到樹節(jié)點(diǎn)中的部件。

本文為作者金烏投稿發(fā)布，轉(zhuǎn)載請(qǐng)注明來源于人人都是產(chǎn)品經(jīng)理并附帶本文鏈接