Axure RP官方教程翻译(8):手风琴样式菜单

手风琴控制器即当每个头部被点击时会出现一部分内容,来显示更多的信息。一些会被设计成这样——当打开手风琴控制器的一部分,那其余的部分就会被自动折叠。本篇实现效果如下:

Axure RP官方教程翻译(8):手风琴样式菜单

STEP 0:下载培训文档

如果你还没有培训文档,请点击下载 AxureTraining.rp 文档。这个文档包含了Axure培训网站上每个教程用到的相关页面。我们建议你一直都用我们准备的这个文档来完成教程,但是如果你不用,那也是可以的——即使你没有使用我们的培训文档,我们也总是会告诉你为了完成每一个教程新文件里都创建了什么。

AxureTraining.rp文档打开后,选择本次练习页面后如下:

Axure RP官方教程翻译(8):手风琴样式菜单

STEP 1:设置

  • 打开培训文档中的“Accordion control”页面。
  • 在画布中有三个组件,每一个都包含一个“Header”组件和四个“Body”组件。这个“Body”组件会先隐藏,只有当点击“Header”组件时才会显示。
  • 点击选择组“Accordion 1”,然后再次点击进入组去编辑它。
  • 选择四个“Body 1 Item”组件,鼠标右键选择“转化为动态面板”在右键菜单中。
  • 将动态面板命名为“Body 1”,然后通过勾选样式标签栏的“隐藏”的复选框来隐藏它。
  • 对“Body 2 Item”和“Body 3 Item”重复执行上面的步骤,将新的动态面板分别命名为“Body 2”和“Body 3”。
  • 对齐排列三个“Accordion”组以便“Header 2”恰好在“Header 1”的下面以及“Header 3”恰好在“Header 2”的下面。

Axure RP官方教程翻译(8):手风琴样式菜单

STEP 2:手风琴交互行为

  • 轻轻双击“Accordion 1”组进入编辑模式,然后选择“Header 1”。
  • 在属性标签下,双击“点击”添加一个点击实例。
  • 在弹窗左边栏,点击“切换可见”行为。
  • 在弹窗右边栏,勾选“Body 1”动态面板。
  • 在右边栏的底部,确认勾选了“切换”,然后勾选复选框“推/拉组件”并且选择方面为“下面”。
  • 点击确定关闭实例编辑器。
  • 重复上面的步骤设置“Header 2”切换可见的动态面板为“Body 2”,以及“Header 3”对应的可见动态面板为“Body 3”。

你可能想要预览一下这个页面来确认你的按钮是否能如你预期那样展开和折叠它们的相关部分内容。

Axure RP官方教程翻译(8):手风琴样式菜单

STEP 3:当一个部分打开时折叠其他部分

  • 选择“Header 1”。双击“实例1”来打开尽心编辑。
  • 在弹窗左边栏,点击“隐藏”。
  • 在弹窗右边栏,勾选“Body 2”动态面板。
  • 点击复选框“收回组件”。确认方面选项设置成“下面”。
  • 接下来,依然在右边栏勾选“Body 3”动态面板。
  • 点击复选框“收回组件”。确认方向选项为“下面”。
  • 点击确认关闭实例编辑器。
  • 重复上面的交互步骤依次对“Header 2”和“Header 3”进行操作,每个实例要隐藏其他两个动态面板。

Axure RP官方教程翻译(8):手风琴样式菜单

STEP 4:预览

点击预览。

尝试打开和关闭不同的手风琴部分。注意它是如何展开一个类目折叠其他类目的。

本文来自Axure.com,经授权后发布,本文观点不代表产品狗立场,转载请联系原作者。

发表评论

登录后才能评论

This site uses Akismet to reduce spam. Learn how your comment data is processed.

联系我们

 

QR code