第14节-动态面板Dynamic Panel | 剑雨Axure RP9系列【基础】

动态面板是一个容器（后面的中继器其实也是一个容器）。多个小部件组成的集合称为状态，多个状态的集合构成动态面板。与中继器不同的是，动态面板每次只能呈现一个状态， 状态的可见性由动态面板的交互功能设置面板状态来控制。因此，动态面板非常适合创建轮播图或者侧边栏。
动态面板是AXURE中唯一一个具有拖动属性和滑动属性的部件。也是唯一一个可以固定到浏览器中一个固定位置（pinned to a fixed position in the browser window）的部件（元件）。因此它是导航栏和侧边栏的最佳选择。

创建动态面板

从左侧窗格拖动

最简单的方法，~~~~直接从左侧元件栏拖入一个动态面板到画布中。

注意：默认情况下，此动态面板的尺寸是固定的，因此如果您希望自动调整大小以适合其包含的内容（其他元件），请勾选上启用“ 自适合内容 ”。

使用现有元件创建

即在画布中选择已经有的部件组合，单击鼠标右键，然后在菜单中选择“ 转换为动态面板 ”。

注意：这种方式创建更方便，更常见些。

动态面板的遮罩

默认情况下，动态面板覆盖有蓝色遮罩，以便更容易在画布上被识别。您可以在AXURE菜单栏中的“ 视图”>“遮罩”中切换遮罩开关。

注意：遮罩不会在浏览器中呈现。

设置单个面板状态

在画布上(中间主体区域)设置

双击画布上的动态面板进入状态编辑模式，你会看到一个青色的边框及画布顶部的工具栏指示。
在此模式下，您可以在动态面板的每一个状态中添加，删除和编辑包含在单个state里面的元件。还可以通过单击画布右上角的“ 隔离”来切换外部元件的可见性。

(注意:这是个AXURE9中新增的功能)

要编辑动态面板状态，请单击画布顶部的当前状态名称。在显示的下拉列表中，您可以执行以下操作：

• 单击状态名称可在画布上查看该元件
• 单击状态名称右侧的“ 复制状态”图标以复制该状态
• 单击状态名称右侧的“ 删除状态”图标以将其删除
• 单击下拉列表底部的“ 添加状态 ”以创建新状态
• 向上和向下拖动状态名称以重新排序（最顶层的状态是默认情况下可见的状态）

在概要(Outline)窗格中设置

在概要窗格中可以直接选中面板的状态或单个状态包含的部件,然后在画布中编辑选中的对象。
在此区域亦可进行状态的复制、删除、新增,按住并拖动可进行排序。

提示：如果动态面板妨碍您与画布上的其他元件交互，则可以通过单击“ 大纲”窗格中其名称右侧的“ 从视图中隐藏（Hide from View)”图标暂时将其隐藏在视图中。这将隐藏画布上的面板，但它仍将在Web浏览器中仍然是可见的。要再次显示面板，则再次单击该图标。

首个状态脱离（Break Away First State）

该功能可以使第一个状态从动态面板中脱离，并将该状态所包含的元件全部释放到画布上。如何使用：右键单击首个状态脱离，如下图所示：

边框样式和背景填充

此部分样式和背景填充比较简单，略去。详细看下图：

注意：这个需要选中某一个状态后来进行编辑，如果你选中的是动态面板本身，那么默认对第一个起作用。

特别属性设置

自适应内容(Fit to Content)

将动态面板设置为“自适合内容”允许其宽度和高度自动调整大小以适合其包含的元件。当在不同大小的面板状态之间切换时，将会进行自适应来进行面板状态的大小调整。
要切换此设置，选中或取消勾选自适合内容或选中动态面板并用鼠标手动调整其大小

滚动

如果某个面板里面的内容超过其面板本身大小，则可以通过滚动来进行展示,要启用滚动，请在“ 样式”窗格的“ 滚动”下拉列表中选择以下选项之一：

• 根据需要滚动
• 滚动垂直
• 滚动水平

注意：动态面板只能在Web浏览器中滚动，滚动条的样式由浏览器控制。模拟滚动条也会出现在Axure RP的动态面板上，但在此处并不起作用。
为了正常显示滚动条，动态面板状态中的内容尺寸一定要比动态面板的固定尺寸大，且不能勾选［自动调整为内容尺寸］。

100%宽

此项主要用于使动态面板状态的颜色填充或图片填充占满整个浏览器的宽度。被填充的图片背景或颜色背景会随窗口大小的变化而变化（宽度）

固定到浏览器

“Pin to Browser”选项可以将某个动态面板固定到浏览器窗口的一个绝对位置上，这意味着在滚动页面时该动态面板不会随之移动。使用此选项可构建导航标题栏和漂浮模块等。

如果还不太明白，回想一些一些恶心WEB网站的固定弹窗吧。

特殊交互

对动态特定的事件和交互

动态面板的拖动，滑动和滚动是AXURE中其它元件所不具备的，因此你可以利用此事件拖动时，滚动时(OnDrag,OnSwipe和操作（设置面板状态，拖动移动等）来设置动态面板特有的交互。（针对交互事件，请参考对交互的详细介绍）

动态面板的选择组

可以将其他元件与动态面板内的元件进行关联。即使用”设定选中“按钮来将外部元件与动态面板内元件进行联动。

此部分功能类似于之前的选项组功能。

查看本节同步视频