【教程】AxureRP7.0部件詳解(一)

7 評論 65815 瀏覽 116 收藏 8 分鐘

axure7

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

Menu 菜單

常用案例

3

網站導航

菜單部件通常用于母板之中,其目的是在原型中跳轉到不同頁面。

1

編輯菜單

要編輯菜單,右鍵點擊在彈出的上下文菜單中選擇 在之前/之后新增菜單項、刪除菜單、新增子菜單。

2

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

4

菜單的交互樣式

菜單可以添加交互樣式:鼠標懸停時/鼠標按下時/選中,選擇要添加樣式的菜單(可以按住Ctrl多選)右鍵選擇交互樣式,或者在部件屬性中設置。
需要注意的是,設置的交互樣式被應用到哪里。如:僅該菜單項、僅該菜單、該菜單及所有子菜單。

案例下載

查看演示
常用交互

5

點擊菜單項打開新頁面

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

菜單部件的局限性

1. 無法嵌入圖標和部件。但是,你可以通過創建自定義菜單來實現。

2. 無法點擊展開子菜單。菜單部件默認是鼠標懸停展示子菜單的。

Tabel表格

1

組織數據

通常用來通過交互(如點擊鼠標)在單元格中動態顯示數據。

2

添加/刪除行和列

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

3

添加/刪除行或列

要增加/刪除表格的行或列,請將鼠標懸停在列表的頂部或側面,當鼠標轉變為黑色小三角時點擊右鍵,選擇增加/刪除行或列。

4

填充表單內容到表格

將文本輸入框的內容動態傳遞給表格是一種常用方式。提交按鈕上的事件使用了局部變量,當鼠標點擊時 設置 單元格的文本 = 文本輸入框中的文本。

案例下載

查看演示

5

點擊單元格顯示面板

和上面的例子相似,點擊編輯按鈕顯示含有編輯內容的動態面板,重新編輯后點擊提交按鈕,單元格內容改變,動態面板隱藏。

本帖分享可見的內容

案例下載

查看效果
交互樣式

表格中的單元格可以設置 鼠標懸停時/鼠標按下時/ 選中的交互樣式,右鍵點擊選中的單元格(可以同時按下Ctrl進行多選),然后在部件屬性面板中設置交互樣式。

表格的局限性

1.鼠標單擊單元格無法輸入文字,單元格默認要雙擊才可以輸入文字。要實現單擊輸入文字狀態,可以使用 Text Field 部件覆蓋在單元格上面。

2.不能同時添加多行或多列,表格只允許每次添加一行或一列。

3.不能動態添加行或列。如果你希望使用動態添加行/列功能,請使用 中繼器部件Repeater.

4.不能對表格中的數據進行排序和過濾。

Tree Widget 樹部件

1

文件瀏覽

樹部件可以用來模擬一個文件瀏覽器,點擊不同的節點將隱藏和顯示一個動態面板的不同狀態。
當一個頁面內有太多交互的時候,點擊樹節點也常被用來跳轉到新頁面。
編輯樹節點

2

添加/刪除樹節點

右鍵點擊一個節點,在彈出菜單中你可以添加/刪除/移動節點。添加子節點將會添加到該節點的下一層。
在該節點前/后添加,是同級節點。

3

添加樹節點圖標

給你的樹部件添加自定義圖標,右鍵點擊一個節點并選擇編輯圖標,導入一個圖標,并選擇應用到:該節點/同級節點或該節點、同級節點和所有子節點。關閉對話框,然后右鍵點擊樹 — 編輯樹屬性,在彈出窗口中勾選 顯示圖標。

4

自定義展開/收縮圖標

點擊右鍵 — 編輯樹屬性,在彈出的對話框中或部件屬性面板中,可自定義展開/收縮圖標。

5

樹節點的交互樣式

樹節點可以添加鼠標懸停時/鼠標按下時/選中時的樣式,右鍵點擊樹節點選擇交互樣式,或者在部件屬性面板中設置。

本帖分享可見的內容

案例下載

查看效果
樹部件的局限性

1. 包含樹部件的邊框不能自定義格式。如果想制作自定義的樹部件,請使用動態面板組合可以制作出你想要的效果。

2. 樹節點可以上傳圖標,但是不能動態隱藏/顯示嵌入到樹節點中的部件。

本文為作者金烏投稿發布,轉載請注明來源于人人都是產品經理并附帶本文鏈接

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 不錯,案例中的源文件很受益

    來自北京 回復
  2. 你點擊“案例下載”看原文件就知道怎么設置了

    來自北京 回復
  3. axure部件管理中可不可以歸組管理,像photoshop一樣,現在散著放著好亂

    來自北京 回復
  4. 這個水印是咋回事啊~

    來自江蘇 回復
  5. 支持一個~

    來自江蘇 回復