Axure RP是一套專門為網站或應用程序所設計的快速原型設計工具， 可以讓應用網站策劃人員或網站功能界面設計師更加快速方便的建立Web AP和Website的線框圖、流程圖、原型和規格。

免費下載Axure RP 優惠購買Axure RP

在本教程中，您將學習如何構建一個結構，在該結構中單擊一個選項卡即可顯示該選項卡的內容。

小部件設置

創建選項卡小部件

• 打開一個新的RP文件，然后在Pages（頁面）窗格中雙擊Page1（頁面1）以在畫布上將其打開。

• 將兩個按鈕小部件從Libraries（庫）窗格拖到畫布上。

• 設置一個按鈕上的文字來Tab 1和對方Tab 2。

• 選擇兩個按鈕，然后使用Style（樣式）窗格中的Corner Visibility（轉角可見性）控件關閉底角。這將同時渲染兩個按鈕，這些按鈕的頂部為圓角，底部為方形角（選項卡形狀）。

創建內容小部件

• 為第二將矩形窗口小部件拖動到畫布上，并將其放置在兩個按鈕下方。

• 給該矩形提供藍色填充顏色，并將其文本設置為Tab 1內容。

• 將第二個矩形拖動到畫布上，然后將其放置在其他小部件的右側。

• 為第二個矩形提供與第一個相同的藍色填充顏色，并將其文本設置為Tab 2內容。

將內容矩形放置在兩個狀態的動態面板中

• 右鍵單擊Tab 1內容矩形，然后在上下文菜單中選擇Create Dynamic Panel（創建動態面板）。

• 在Outline（大綱）窗格中，將光標懸停在新的動態面板窗口小部件的項目上，然后單擊右側的Add State（添加狀態）圖標。

• 仍在Outline（大綱）窗格中，選擇Tab2內容矩形并將其拖動到State2的下方和右側。這會將其添加到該動態面板狀態，并在畫布上打開該狀態。
  

• 將Tab 2內容矩形移動到畫布上的（0,0）。

• 單擊畫布右上方的關閉，或按ESC退出狀態編輯模式。
  

單擊選項卡時設置動態面板的狀態

• 選擇Tab 1小部件，然后在Interactions（交互）窗格中單擊New Interaction（新建交互）。

• 在出現的列表中選擇Click或Tap事件，然后選擇Set Panel State操作。

• 在arget（目標）下拉列表中選擇動態面板，然后在State下拉列表中選擇State 1。

• 單擊確定以保存操作。

• 使用Tab 2小部件重復這些步驟，將動態面板的狀態設置為State 2。

指示哪個選項卡處于活動狀態

給選項卡選擇樣式效果

• 選擇兩個選項卡小部件，然后在Interactions（交互）窗格中單擊New Interaction（新建交互）。

• 在樣式效果下，選擇：selected。

• 在出現的塊中，檢查Fill Color（填充顏色）屬性，然后選擇與內容矩形相同的藍色。

單擊時將選項卡設置為其選定狀態

• 選擇Tab 1小部件，然后單擊Interactions（交互）窗格中單擊或點擊塊底部的+符號。 這將使我們向事件添加新的動作。

• 選擇Set Selected/Checked action（設置選定/選中的操作），然后定位小部件。

• 單擊確定以保存操作。

• 對Tab 2小部件重復此操作。

將選項卡放入選擇組

• 將選項卡小部件放在選擇組中將確保一次只能選擇其中一個狀態。

• 選擇兩個選項卡小部件，然后單擊Interactions（交互）窗格右上方的More Options（更多選項）圖標。

• 在選擇組字段中輸入選項卡控制組。

使選項卡1為默認選中

• 選擇選項卡1，然后在Interactions（交互）窗格打開More Options（更多選項）菜單。

• 選中已選擇框。

想要獲得Axure RP更多資源、正版授權的伙伴，請咨詢了解

關注慧聚IT微信公眾號???，了解產品的最新動態及最新資訊。