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

免費下載Axure RP 優(yōu)惠購買Axure RP

在本教程中，您將學(xué)習(xí)如何構(gòu)建一個結(jié)構(gòu)，在該結(jié)構(gòu)中單擊一個選項卡即可顯示該選項卡的內(nèi)容。

小部件設(shè)置

創(chuàng)建選項卡小部件

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

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

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

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

創(chuàng)建內(nèi)容小部件

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

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

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

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

將內(nèi)容矩形放置在兩個狀態(tài)的動態(tài)面板中

• 右鍵單擊Tab 1內(nèi)容矩形，然后在上下文菜單中選擇Create Dynamic Panel（創(chuàng)建動態(tài)面板）。

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

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

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

• 單擊畫布右上方的關(guān)閉，或按ESC退出狀態(tài)編輯模式。
  

單擊選項卡時設(shè)置動態(tài)面板的狀態(tài)

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

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

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

• 單擊確定以保存操作。

• 使用Tab 2小部件重復(fù)這些步驟，將動態(tài)面板的狀態(tài)設(shè)置為State 2。

指示哪個選項卡處于活動狀態(tài)

給選項卡選擇樣式效果

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

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

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

單擊時將選項卡設(shè)置為其選定狀態(tài)

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

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

• 單擊確定以保存操作。

• 對Tab 2小部件重復(fù)此操作。

將選項卡放入選擇組

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

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

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

使選項卡1為默認選中

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

• 選中已選擇框。

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

關(guān)注慧聚IT微信公眾號???，了解產(chǎn)品的最新動態(tài)及最新資訊。