动态面板元件

一个动态面板是一个容器，它可以容纳其他元件。一个动态面板可以有一个或多个状态，而且在同一时间只有一个状态是可见的。可见状态可以通过 Set Panel State 动作动态设置。

动态面板的独特之处在于，它们是唯一可以在浏览器中拖动或滑动的元件类型。它们也是唯一可以被钉在浏览器窗口固定位置的元件类型。

在 Default 元件库的 Dynamic 部分，有一个空动态面板元件。你可以从 libraries（元件库） 面板中将其拖到画布上。

注意

这个动态面板的尺寸默认是固定的，所以如果你想让它自动调整大小以适应其包含的元件，请确保在它上面启用 Fit to Content (opens new window) 。

你可以使用画布上已有的元件创建一个新的动态面板。选择一个或多个元件，右键单击，并在上下文菜单中选择 Create Dynamic Panel 。这将创建一个新的 fit-to-content (opens new window) 动态面板。

动态面板默认有一个紫色的描边，使它们在画布上更容易被发现。你可以在应用程序菜单中的 View → Masks ，切换描边的显示。

双击画布上的动态面板，可以进入状态编辑模式，同时在画布上动态面板会以紫色蒙版显示。

在这种模式下，你可以在动态面板的状态中添加、删除和编辑元件。要编辑动态面板状态本身，点击动态面板上方出现的浮动上下文栏中的当前状态名称。在出现的下拉菜单中，你可以进行以下操作。

在 Outline 面板中选择一个动态面板状态或其包含的元件之一，以打开该状态在画布上进行编辑。

要快速将现有的元件移入或移出动态面板状态，在 Outline 面板中拖动它们。

要在动态面板上添加一个新的状态，把鼠标放在它的名字上，然后点击右边的 Add State 图标。同样，你可以通过将鼠标放在一个状态的名称上，然后点击右边的 Duplicate State 图标来复制该状态。选择一个状态并按 DELETE 键来删除它，或者右键单击并在上下文菜单中选择 Delete 。

要重新排列动态面板的状态，可以向上和向下拖动它们，或者右键单击它们并使用上下文菜单中的选项。最上面的状态是默认可见的。

提示

如果一个动态面板妨碍了你与画布上其他元件的交互，你可以通过点击 Outline 面板中其名称右侧的 Hide from View 图标来暂时隐藏它。这将隐藏画布上的面板，但它在浏览器中仍然是可见的。要再次显示该面板，请再次点击该图标。

你可以通过输入 all states view ，同时查看所有的动态面板状态。要做到这一点，从面板上下文栏的右上角选择 View All 。或者你可以选择面板状态名称下拉列表底部的 View All 选项。

在查看所有状态时，你可以重新安排布局，通过点击 Auto layout 按钮，从下拉菜单中选择你想要的选项，垂直或水平地显示所有状态。

此外，你可以在任何一个单独的动态面板状态中添加、删除和编辑元件。要在一个状态中添加一个新的元件，只需从库面板中拖动它，并把它放到你选择的面板状态中。

在所有状态视图中，你也可以通过点击页面顶部的 + ，添加一个新的面板状态。要退出所有状态视图并返回到你所处的页面，请选择页面左上方的后退箭头图标。

Break Away First State 选项允许你删除一个动态面板的第一状态，并将其包含的所有元件放在面板外的画布上。要访问这个选项，请右击动态面板，在上下文菜单中选择 Break Away First State 。

注意

如果一个动态面板只有一个状态，打破这个状态也会删除这个面板。

你可以在 Style 面板中用以下选项来设计你的动态面板状态。每个状态的每个属性都有自己的选择，所以你可以对它们进行相同或不同的样式。

Fill color or image 填充颜色或图像: 这些都是背景属性，所以填充颜色或图像只在动态面板中没有被元件覆盖的区域可见。

Border color, thickness, and visibility 描边颜色、粗细和可见性: 状态的边框在其包含的元件前面渲染，所以厚的边框可以在面板状态的边缘重叠或切断元件。

Outer shadow 外阴影: 阴影呈现在动态面板本身的后面，而且根据你在样式面板中选择的偏移值，它应该始终是可见的。

Corner radius and visibility 圆角和可见性: 状态的边角在其包含的元件前面呈现，所以圆角可以在面板状态的边角处重叠或切断元件。

注意

当你选择了动态面板本身，对这些样式选项所做的改变只应用于面板的第一个状态。

将动态面板设置为适合内容允许其宽度和高度自动调整以适合其包含的元件。当在不同大小的面板状态之间切换时，以及当对可见状态的所含元件进行改变时，调整就会自动发生。

要切换这个设置，可以在 Style 面板中勾选或取消选中 Fit to Content ，或者双击动态面板的任何一个调整手柄。

注意

如果你手动调整动态面板的大小，无论是通过 W 和 H ，还是通过拖动面板的调整手柄，都会自动禁用适合内容选项。

你可以通过让动态面板本身比其状态的内容更短或更窄来让内容可以滚动。这将关闭 Fit to Content ，并隐藏任何落在动态面板边界之外的元件。

然后要启用滚动功能，在 Style 面板中的 Scroll 下拉菜单中选择以下选项之一。

注意

动态面板只能在浏览器中进行滚动，而且滚动条的样式由浏览器控制。在 Axure RP 中，模拟滚动条会出现在动态面板上，但它们没有功能。

一个 “100% 宽” 的动态面板可以用来让颜色或图像撑满整个浏览器窗口宽度。

首先，为动态面板的第一个状态设置背景颜色或背景图片。然后，在样式面板中选中 100% Wide 。当你在浏览器中查看原型时，背景颜色或图像将会扩展到窗口的全部宽度。如果你调整窗口的大小，动态面板的宽度（和它的背景）将自动调整。

注意

这个属性只调整动态面板本身的大小。其包含的元件不受影响。

Pin to Browser 选项将动态面板固定在相对于浏览器窗口的位置，这意味着当页面滚动时它不会移动。

选择一个动态面板，在 Style 面板中点击 Pin to Browser 。

在出现的对话框中，选中 Pin to browser window ，以启用该功能。

然后设置水平和垂直定位。

如果你希望面板总是出现在页面上所有其他元件的前面，请选中 Keep in front 。

点击 OK 关闭对话框。

动态面板具有其他元件所不具备的一些特殊功能：它们可以被拖动、滑动和滚动，而且一个面板的活动状态（可见的那个）可以动态地改变。你可以通过动态面板特有的事件（ Dragged,Swiped Up 等）和动作（ Set Panel State,move with drag, 等）来驾驭这些能力。

如果你已经创建了一个具有多种状态的动态面板，你可以使用 Set Panel State 动作来动态地改变面板在浏览器中的可见状态。

在配置动作时，你可以从这些选项中选择一个状态。

一个特定的状态的名称

Next：这将把面板设置为列表中的下一个状态。这个选项可以和 Repeat every...ms 复选框一起使用，自动循环浏览面板的所有状态。添加 Wrap from last to first 选项将允许你创建重复的结构。

Previous：这将把面板设置到列表中的前一个状态。这个选项的配置类似于 Next

Stop Repeating：这将阻止任何进一步的自动 Next ，或 Previous。

Value：允许你通过它的名字或它在状态列表中的位置（1，2，3，等等）将面板设置为一个特定的状态。你可以在这个字段中输入一个字面值，或者用 variable (opens new window) 或 expression (opens new window) 来动态填充它。

动态面板有一些与它们所包含的元件可能有的相同的事件（例如 Click or Tap ），这有可能导致冲突。如果一个动态面板和它所包含的一个元件在同一个事件上设置了动作，元件的动作将被执行而不是面板的。

您可以在一组形状、线条、图像和/或动态面板小部件之间创建一种关系，在该关系中，一次只能将一个小部件设置为其所选状态，并设置为 “已选择” 状态。(这类似于单选按钮组中元素之间的关系。)

要了解更多，请查看 可选组 (opens new window) 文章。