原型設計工具Axure RP參考（十三）：動態面板小部件（下）

---

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

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

---

動態面板是一個容器，用于將其他小部件保存在稱為“狀態”的集合中。動態面板可以具有一個或多個狀態，并且一次只能顯示其中一種狀態。可以使用“設置面板狀態”操作來動態設置可見狀態，這使動態面板非常適合創建輪播和幻燈片顯示。（本文是動態面板小部件的下部分，點擊此處查看上部分）

特殊性質

適合內容

將動態面板設置為“適合內容”可使其寬度和高度自動調整大小以適合其包含的窗口小部件。當在不同大小的面板狀態之間切換以及對可見狀態包含的窗口小部件進行更改時，會發生這種大小調整。

要切換此設置，請在“樣式”窗格中選中或取消選中“適合內容”框，或雙擊任何動態面板的調整大小手柄。

注意:如果您通過“樣式”窗格中的“ W”和“ H”字段或拖動面板的調整大小手柄來手動調整動態面板的大小，則“適合內容”將被自動禁用。

滾動

通過使動態面板本身比其狀態的內容更短或更窄，可以使動態面板的內容可滾動。這將關閉“適合內容”并隱藏任何超出動態面板范圍的窗口小部件。

然后要啟用滾動，請在“樣式”窗格的“滾動”下拉列表中選擇以下選項之一：

• 根據需要滾動
• 垂直滾動
• 水平滾動

注意：動態面板只能在Web瀏覽器中滾動，滾動條的樣式由瀏覽器控制。模擬滾動條將出現在Axure RP的動態面板上，但它們不起作用。

100％寬

“ 100％寬”動態面板用于使顏色或圖像跨越瀏覽器窗口的整個寬度。

首先為動態面板的第一種狀態設置背景顏色或背景圖像。然后，在“樣式”窗格中檢查“ 100％寬”。當您在Web瀏覽器中查看原型時，背景顏色或圖像將擴展窗口的整個寬度。如果調整窗口的大小，動態面板的寬度（及其背景）將自動調整。

注意：此屬性僅調整動態面板本身的大小。它包含的小部件不受影響。

固定到瀏覽器

“固定到瀏覽器”選項將動態面板固定在相對于瀏覽器窗口的位置，這意味著在滾動頁面時它不會移動。使用此選項可以構建諸如始終可見的導航標題和模式窗口之類的東西。

• 選擇一個動態面板，然后在“樣式”窗格中單擊“固定到瀏覽器” 。
• 在出現的對話框中，選中“固定到瀏覽器”窗口框以啟用該功能。
• 在下面，配置面板的水平和垂直位置。

注意：將根據Axure RP畫布上動態面板的X和Y坐標自動設置“左”和“上”圖釘選項的邊距。要更改這些邊距，請在畫布上移動“動態面板”。

• 如果您希望面板始終顯示在頁面上所有其他小部件的前面，請選中保留在前面的框。
• 單擊“確定”關閉對話框。

特殊互動

特定于動態面板的事件和操作

動態面板具有一些其他控件沒有的特殊功能：可以拖動，滑動和滾動它們，并且可以動態更改面板的活動狀態（可見狀態）。您可以通過動態面板特有的事件（“拖動”，“向上滑動”等）和動作（“設置面板狀態”，“拖動移動”等）來利用這些功能。要了解更多信息，請參閱有關交互事件，案例和操作的文章。

設置面板狀態動作

如果創建了具有多個狀態的動態面板，則可以使用“設置面板狀態”操作在Web瀏覽器中動態更改面板的可見狀態。

配置操作時，可以從以下選項之一選擇狀態：

• 特定州的名稱
• Next，它將面板設置為列表中的下一個狀態。此選項可與“重復每隔...毫秒”復選框一起使用，以自動循環顯示面板的所有狀態。添加從最后到第一的環繞選項將使您能夠創建重復結構，例如圖像輪播和幻燈片。
• Previous，它將面板設置為列表中的上一個狀態。可以與“下一步”類似地配置此選項。
• 停止重復，這將停止進一步的自動下一個或上一個重復
• Value，它允許您通過面板的名稱或在狀態列表（1、2、3等）中的位置將面板設置為特定狀態。您可以在此字段中輸入文字值，也可以使用變量或表達式動態填充它。這對于在另一個頁面上設置動態面板的狀態非常方便

火鼠標樣式效果

默認情況下，在動態面板中具有鼠標樣式效果的窗口小部件照常工作：當您將鼠標懸停或單擊Web瀏覽器中的窗口小部件時，將顯示樣式效果。但是，您可以選擇在鼠標懸停或單擊動態面板本身的任何部分（包括小部件之間的空白區域）時立即觸發所有包含的小部件的樣式效果。

為此，請選擇動態面板，然后在“交互”窗格中選中“ Fire Mouse樣式效果”框。

動態面板VS包含的小部件上的交互

動態面板具有與其包含的窗口小部件可能相同的事件（例如Click或Tap），這可能會導致沖突。如果動態面板及其包含的小部件之一對同一事件設置了動作，則將執行小部件的動作，而不是面板的動作。

選擇組

您可以在一組形狀，線條，圖像和/或動態面板窗口小部件之間創建關系，通過“設置選定/選中”操作，一次只能將一個窗口小部件設置為其選定狀態。（這類似于單選按鈕組中單選按鈕之間的關系。）

本文是動態面板小部件的下部分，點擊此處查看上部分

推薦閱讀：

原型設計工具Axure RP入門教程

原型設計工具Axure RP新手教程

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