AxureRP 动态面板

动态面板小部件
动态面板是一个容器，在称为“状态”的集合中保存其他小部件。动态面板可以具有一种或多种状态，并且一次只能看到其中一种状态。可见状态可以通过设置面板状态动作动态设置，这使得动态面板非常适合创建轮播和幻灯片。
动态面板的独特之处在于它们是唯一可以在 Web 浏览器中拖动或滑动的小部件类型。它们也是唯一可以固定到浏览器窗口中固定位置的小部件类型，使它们成为始终可见的导航标题和侧边栏的理想选择。



创建动态面板



从库窗格中拖动
默认小部件库的动态部分中有一个空的动态面板小部件。从“库”窗格拖到画布上的动态面板将以一个可以添加小部件的单一空状态开始。
笔记
默认情况下，此动态面板的尺寸是固定的，因此如果您希望它自动调整大小以适合其包含的小部件，请确保在其上启用适合内容。
使用现有小部件创建
您可以使用画布上已有的小部件创建新的动态面板。选择一个或多个小部件，单击鼠标右键，然后在上下文菜单中选择创建动态面板。这将创建一个新的适合内容的动态面板，该面板具有包含所选小部件的单一状态。
动态面板蒙版
默认情况下，动态面板具有紫色轮廓，以便更容易在画布上发现它们。您可以在应用程序菜单中的视图 → 蒙版中切换轮廓蒙版。
管理状态
在画布上



双击画布上的动态面板以进入状态编辑模式，由画布上的紫色边框和工具栏指示。
在此模式下，您可以在动态面板的状态下添加、删除和编辑小部件。要编辑动态面板状态本身，请在动态面板上方显示的浮动上下文栏中单击当前状态的名称。在出现的下拉列表中，您可以执行以下操作：
•单击一个州的名称以在画布上查看其小部件
•单击州名称右侧的复制州图标以复制该州名称
•单击状态名称右侧的删除状态图标将其删除
•单击下拉列表底部的添加状态以创建新状态
•单击下拉列表底部的查看全部图标以进入所有状态视图
•上下拖动状态名称以重新排序（最上面的状态是默认可见的状态）
在大纲窗格中



在大纲窗格中选择一个动态面板状态或其包含的小部件之一，以打开该状态以在画布上进行编辑。
要快速将现有小部件移入或移出动态面板状态，请将它们拖到大纲窗格中。
要将新状态添加到动态面板，请将鼠标悬停在其名称上，然后单击右侧的添加状态图标。同样，您可以通过将鼠标悬停在其名称上并单击右侧的复制状态图标来复制状态。选择一个状态并按下DELETE将其删除，或右键单击并在上下文菜单中选择删除。
要重新排列动态面板的状态，请上下拖动它们或右键单击它们并使用上下文菜单中的选项。最顶层状态是默认可见的状态。
如果动态面板妨碍您与画布上的其他小部件进行交互，您可以通过单击大纲窗格中其名称右侧的“从视图中隐藏”图标暂时将其隐藏。这将隐藏画布上的面板，但在 Web 浏览器中仍然可见。要再次显示面板，请再次单击该图标。
所有状态视图



您可以通过进入所有状态视图同时查看所有动态面板状态。为此，请选择面板上下文栏右上角的查看所有状态图标。或者，您可以选择面板状态名称下拉列表底部的查看全部图标。



在所有状态视图中，您可以在任何单独的动态面板状态中添加、删除和编辑小部件。要将新小部件添加到状态，只需将其从库窗格中拖放到您选择的面板状态中即可。
您还可以通过单击页面顶部的+图标在所有状态视图中添加新的面板状态。要退出所有状态视图并返回您所在的页面，请选择页面左上角的后退箭头图标。
脱离第一状态
该割舍第一州选项允许你删除一个动态面板的第一状态，并把所有的部件所含的面板外的画布上。要访问此选项，请右键单击动态面板并在上下文菜单中选择Break Away First State。
笔记
如果一个动态面板只有一个状态，打破状态也会删除面板。
边框样式和背景填充



您可以使用样式窗格中的以下选项设置动态面板状态的样式。每个州对每个属性都有自己的选择，因此您可以对它们进行相同或不同的样式设置。
•填充颜​​色或图像：这些是背景属性，因此填充颜色或图像仅在小部件未覆盖的动态面板区域中可见。
•边框颜色、粗细和可见性：状态的边框呈现在其包含的小部件之前，因此粗边框可以重叠或切断面板状态边缘的小部件。
•外阴影：阴影呈现在动态面板本身的后面，并且根据您在样式窗格中选择的偏移值，它应该始终可见。
•角半径和可见性：状态的角在其包含的小部件前面呈现，因此圆角可以重叠或切断面板状态角处的小部件。
笔记
当您选择了动态面板本身时，对这些样式选项所做的更改仅应用于面板的第一个状态。
特殊属性
适合内容



将动态面板设置为“适合内容”允许其宽度和高度自动调整大小以适合其包含的小部件。当在不同大小的面板状态之间切换以及对可见状态包含的小部件进行更改时，会发生这种调整大小。
要切换此设置，勾选或取消勾选框调整到内容在样式面板或双击任何动态面板的大小调整手柄。
笔记
如果您通过样式窗格中的W和H字段或通过拖动面板的调整大小手柄手动调整动态面板的大小，“适合内容”将被自动禁用。
滚动
您可以通过使动态面板本身比其状态的内容更短或更窄来使动态面板的内容可滚动。这将关闭适合内容并隐藏任何落在动态面板边界之外的小部件。
然后要启用滚动，请在样式窗格的滚动下拉列表中选择以下选项之一：
•根据需要滚动
•垂直滚动
•水平滚动
笔记
动态面板只能在 Web 浏览器中滚动，滚动条的样式由浏览器控制。模拟滚动条将出现在 Axure RP 的动态面板上，但它们不起作用。
100% 宽
“100% 宽”动态面板用于使颜色或图像跨越浏览器窗口的整个宽度。
首先为动态面板的第一个状态设置背景颜色或背景图像。然后，在样式窗格中检查100% 宽。当您在 Web 浏览器中查看原型时，背景颜色或图像将扩展窗口的整个宽度。如果您调整窗口大小，动态面板（及其背景）的宽度将自动调整。
笔记
此属性仅调整动态面板本身的大小。它包含的小部件不受影响。
固定到浏览器
“固定到浏览器”选项将动态面板固定在相对于浏览器窗口的位置，这意味着当页面滚动时它不会移动。使用此选项来构建诸如始终可见的导航标题和模式窗口之类的东西。



1.选择一个动态面板，然后单击样式面板中的固定到浏览器。
2.在出现的对话框中，选中固定到浏览器窗口复选框以启用该功能。
20下面，配置面板的水平和垂直定位。
笔记
Left和Top pin 选项的边距是根据 Axure RP 画布上动态面板的 X 和 Y 坐标自动设置的。要更改这些边距，请在画布上移动动态面板。
4.如果您希望面板始终显示在页面上所有其他小部件的前面，请选中保留在前面的框。
5.单击确定关闭对话框。
特殊互动
动态面板特定的事件和动作
动态面板具有其他小部件所没有的一些特殊功能：可以拖动、滑动和滚动，并且可以动态更改面板的活动状态（可见的状态）。您可以通过动态面板独有的事件（拖动、向上滑动等）和动作（设置面板状态、拖动移动等）来利用这些功能。要了解更多信息，请查看有关交互事件、案例和操作的文章。
设置面板状态动作
如果您创建了具有多种状态的动态面板，则可以使用“设置面板状态”操作来动态更改面板在 Web 浏览器中的可见状态。



配置操作时，您可以从以下选项之一中选择状态：
•特定州名
•Next，这会将面板设置为列表中的下一个状态。此选项可与重复每...毫秒复选框一起使用，以自动循环显示面板的所有状态。添加Wrap from last to first选项将允许您创建重复结构，如图像轮播和幻灯片。
•Previous，这会将面板设置为列表中的上一个状态。该选项的配置方式与Next类似
•停止重复，这将停止任何进一步的自动下一个或上一个重复
•Value，允许您通过面板的名称或其在状态列表中的位置（1、2、3 等）将面板设置为特定状态。您可以在此字段中输入文字值或使用变量或表达式动态填充它。这对于在另一个页面上设置动态面板的状态很方便
火鼠风格效果
默认情况下，动态面板中具有鼠标样式效果的小部件照常工作：当您将鼠标悬停或单击 Web 浏览器中的小部件时会显示样式效果。但是，您可以选择在鼠标悬停或单击动态面板本身的任何部分时立即触发所有包含的小部件的样式效果，包括小部件之间的任何空白空间。
要做到这一点，选择动态面板和检查框消防鼠标样式效果的相互作用窗格。
动态面板与包含小部件的交互
动态面板具有与其包含的小部件可能具有的某些相同的事件（例如Click 或 Tap），这可能会导致冲突。如果动态面板及其包含的小部件之一在同一事件上设置了操作，则将执行小部件的操作而不是面板的操作。
选择组
您可以在一组形状、线条、图像和/或动态面板小部件之间创建关系，其中一次只能使用Set Selected/Checked操作将一个小部件设置为其选定状态。（这类似于单选组中单选按钮之间的关系。）