logo 原型设计工具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新手教程


想要获得Axure RP更多资源、正版授权的伙伴,请咨询【慧都客服】了解

关注慧聚IT微信公众号???,了解产品的最新动态及最新资讯。

慧聚IT