Hide and show with Dynamic Panel(Basic)
Dynamic Panel允許你隱藏，顯示，交換和移動wireframe的內容。本章節講述dynamic panels的隱藏，顯示內容的初級功能。更高級的用法請點擊 Dynamic Panels(Advanced)
教程視頻：下載MP4格式
Dynamic Panels Overview
Dynamic Panel 部件（widget）是一堆狀態或包含其他部件的圖形的面板。面板可以隱藏，顯示和移動。可以將當前可視圖形設置為動態。動態面板允許在你的原型當中顯示功能，而且可以進行拖拽。譬如自定義提示（Custom tooltips）,lightboxes,標簽控件（Tab controls）。作為Axure RP的一般規則，在你的原型當中，無論你希望顯示，隱藏，修改和移動對象的時候，就可以選擇使用動態面板（Dynamic Panel）。你會發現可以在你的原型工具箱中，它會成為最常使用的工具。
Dynamic Panel States
一個動態面板可以有一個或多個狀態（state），並且每一個狀態可以是包含不同部件（widget）的圖形。在同一時刻，只可以顯示動態面板的一個狀態。在交互中，可以隱藏或顯示面板，同時也可以設置面板的當前狀態。
在wireframe中，通過拖動和拖拽可以增加並設置面板的大小。通過手柄也可以重新設置大小。在wireframe頁面中，動態面板部件的大小決定可以你看到狀態的范圍。
Tip:如果在你的wireframe已經存在了部件，並且你希望設置該部件為動態面板，有一個非常簡單的操作——通過右鍵該部件彈出的菜單“Convert to Dynamic Panel“可以很方便地設置。該操作會自動生成一個新的動態面板，並且將該部件設置為第一個狀態。
*Add and Design Dynamic Panel States
默認情況下，動態面板是空的，所以你需要設置內容（widget）為面板狀態。為了完成這個，雙擊面板可以打開“Dynamic Panel State Manager”對話框。
在對話框中，你可以增加，刪除，重新排序和打開編輯狀態。第一個狀態為動態面板的默認狀態。
在列表框中選擇一個狀態，點擊“Edite State”按鈕打開編輯狀態對話框。
你會發現藍色表明輪廓狀態是正在編輯狀態。這會顯示動態面板的大小，並且藍色輪廓也是你可以看到狀態的邊界。通過拖拽部件（widget）可以設計面板狀態，就像在任何wireframe上進行拖拽一樣。
Scrollable Area:右鍵面板選擇“Edit Dynamic Panel"->"Show Scrollbars as Needed"可以為動態面板增加滾動條。如果你增加的部件（widget）超過了面板一個狀態的邊界時，滾動條就會在原型里面的動態面板中出現。
*Hide Content by Default
動態面板可以設置默認為隱藏狀態。為了完成這個，在wireframe中右鍵點擊面板，選擇“Edite Dynamic Panel（編輯動態面板）”->“Set Hidden（設置隱藏）"即可。
隱藏面板內容會將部件（widget）表面輪廓的藍色變為黃色。
Dynamic Panel Manager
動態面板管理面板（Dynamic Panel Manager） 會提供所有動態面板的狀態的新增，這是管理動態面板的另一個方式。當你在一個頁面使用很多動態面板的時候，這個對話框就非常有用，可以很快導航到自己想編輯的動態面板。
同時面板提供在wireframe編輯中隱藏動態面板的功能（右邊的小方框就是拿來隱藏面板的。）。這樣方便選擇那些被面板遮住的部件（widget）。
在母板中的動態面板同樣具有這一選項。
如果管理面板不在視圖中，你可以從“view->Dynamic Oanel Manager“中重新打開和顯示該面板。
*Using the Dynamic Panel Manager
選擇一個動態面板的名字或狀態，點擊管理面板的工具欄中的“Add State”按鈕可以新建和刪除狀態。右鍵一個動態面板的名字或狀態可以使用文本菜單。
雙擊一個狀態可以打開編輯狀態。你也可以選擇一個面板名稱或狀態，點擊“Edit All States“按鈕，來打開所有動態面板的狀態。右鍵動態面板的名稱同樣也有這一選項。
管理面板中，點擊面板名稱右邊的藍色正方形，可以在wireframe面板中隱藏動態面板。右鍵頁面名稱選擇”Hide All"可以在頁面當中隱藏所有動態面板。在動態面板遮住其他部件的時候，這一點非常有用。
需要注意的是，這里的隱藏和動態面板的默認隱藏內容是不一樣的。
Interacting with Dynamic Panels
一旦你的wiraframe擁有了一個動態面板，你就可以通過增加事件的case和從列表選擇操作（Action）來增加一般的交互。操作（Actions）提供給動態面板交互一些可用的操作有：Set Panel state(s) to State(s), Toggle Visibility for Panel(s), Show Panel(s), Move Panel(s), Hide Panel(s), Bring Panel(s) to Front, Send Panel(s) to Back.
我們將說明一些基本的交互，包括顯示和隱藏面板，設置面板狀態，設置面板為最前。移動動態面板和動態面板的事件將在Advanced Dynamic Panels里面討論。
*Set Dynamic Panel State
創建一個有多個狀態的動態面板，並且用“Set Panel State(s) to State(s)“操作設置面板為一個特定的狀態。在”Case Editor" 對話框中，在列表中選擇操作（action）。當你選擇了一個面板，你可以選擇一個你想設置的狀態（在Select the Satate下拉框中）。你可以在同一個操作里面設置多個動態面板的狀態。
操作用於模式中，譬如選項卡或者點擊一個按鈕或下拉框改變一個區域的內容的時候。（看下面例子）
*Show & Hide / Toggle Visibility for Panel
使用“Show Panel(s)”和“Hide Panel(s)”操作可以顯示和隱藏動態面板當前狀態的內容。在“Editor Case”對話框中，選擇操作，在列表中選擇頁面中的動態面板。設置動態面板的標簽是個好習慣，這方便面板的查找。你可以在同一個操作里面設置多個面板的為隱藏或顯示。
使用“Toggle Visibility for Panel(s)”操作可以轉換面板的顯示和隱藏。
該操作常用於錯誤信息的動態顯示和隱藏。（看下面例子）
*Move Panel
“Move Panel(s)“操作允許動態移動一個面板內容特定的像素距離或移動到一個頁面中的特定的位置。設置你希望面板移動的位置，在事件中增加一個觸發移動面板的交互用例。（譬如，在一個button的OnClick事件增加一個移動面板的用例）
在”Case Editor“對話框中選擇”Move Panel(s)“操作，選擇你需要移動的面板。到了Step 4（第四步）的底部，你可以設置面板移動的像素位置或者設置面板移動到固定的位置。
這一操作可以用於原型和擴大區域，移動下層的內容為顯示或隱藏。（看下面的例子）
*Bring Panel to Front / Send Panel to Back
如果你的動態面板在原型中被其他部件遮住了，而你需要將其顯示在最頂層的時候，你可以使用“Bring Panel(s) to Front”操作。這個操作會將面板顯示在其他部件的上面。在“Case Editor ”對話框中，選擇操作，選擇需要操作的面板。你可以在同一個操作里面操作多個面板。“Send Panel(s) to Back“的作用恰好相反。
在”light boxes“和自定義彈出菜單，自定義提示中，該操作是必須使用的。特別是面板在母板的背景頁中的時候。（看下面的例子）
*Animation and Transition Effects
移動面板的時候可以有一個動畫效果，同樣顯示和隱藏面板的時候也可以有一個漸變效果。
警告：這些動畫效果或許在原型設計的時候很容易，但是開發或許會很難實現。
在實現“Move Panel”操作的時候，你可以選擇像旋轉，彈跳或其它特定的動畫變換。
在實現“Show Panel”。“Hide Panel”或“Toggle Panel”的時候，你可以選擇漸變動畫。
在用“Set Panel State”操作設置面板狀態的時候，你也可以選擇漸變或滑動效果。
Dynamic Panel Tutorials
*Show Hidden Panel Tutorials
這個例子使用了動態面板並用“Show Panel(s)“操作動態顯示一個隱藏的錯誤信息。
轉到”Show Hidden Panel Tutorial(原文)“例子
*Tab Control Tutorial
這個例子使用了一個有多個狀態的動態面板和“Set Panel State(s) to State(s)"操作來設置選項卡控件顯示的內容
轉到“Tab Control Tutorial(原文)“例子
*Custom Tooltip Tutorial
這個例子講述了在移動光標經過和移出一個部件的時候如何顯示和隱藏一個動態面板的自定義提示。
轉到“Custom Tooltip Tutorial(原文)”例子
*Flyout Menu Tutorial
這個例子講述了如果使用動態面板創建一個自定義彈出菜單。
轉到“Flyout Menu Tutorial(原文)”例子
The Round Up
已經對動態面板的基礎有所了解了嗎？Good，繼續深入學習"Dynamic Panels (Advanced)（動態面板高級功能）“
仍然需要幫助？進入論壇或發送郵件到support@axure.com
原文地址：http://www.axure.com/dynamic-panels-basic Axure官方地址：http://www.axure.com/ PS：翻譯是為了更加透徹地理解文章和分享。英文一般，請輕度吐槽。 版權由原地址提供公司所有。