在手风琴中,每一个header在点击的时候,会扩展出自己的子内容,用于展示更多信息。有些设计是可以在点击手风琴控制器的一个header的时候,自动关闭其他部分
Step0: 下载练习文件
在这里下载AxureTraining.rp文件,并用Axure RP打开
Step1: GETTING STARTED
- 打开"Accordion control"页面
- 页面包含了三组小部件,每一组部件包含了一个header和一个四个“body”组件, 这四个body会在开始的时候隐藏,只有当对应的“header”被点击的时候才会显示
- 点击“Accordion 1”Group选中,然后再次点击编辑Group内部
- 选中所有的四个“Body 1”组件,右击选择“Convert to Dynamic panel”, 将这个Dynamicpanel命名为Body1, 并将其标记为“Hidden”状态
- 对body2,3,4重复步骤4
-
然后将Header1, header2, header3依次摆放整齐
Step2: Accordion Interaction(手风琴交互)
- 点击“Accordion 1”Group选中,然后再次点击编辑Group内部, 选中内部的“Header1”, 在Properties标签中,双击“Onclick”, 添加一个Onclick case
- 在左列,选择“ToggleVisibility”
- 在右边列,选中“Body 1”dynamic panel
- 在右边列的底下,确保选中“Toggle” , 然后点击“Push/Pull widgets”复选框, Direction选择“Below”
- 点击"OK", 关闭case编辑器
- 给Header2和Header3分别选择对应"Body2"和"Body3"dynamicpanel, 这个时候就可以先预览一下效果了
Step3: Collapse other sections when one section is opened(选择一个部分的时候,讲其他部分关闭)
- 选择“Header 1”,双击“Case1”, 打开再次编辑
- 左侧点击“hide”
- 右侧选择"Body2" dynamic panel
- 点击“pull widgets”复选框, 确保Direction 选项选择"Below"
- 下一步选择"Body3"dynamic panel
- 点击"Pull widgets"复选框,确保Direction选项选择"Below"
- 点击OK, 关闭Case编辑器
- 然后给Header2和Header3重复这个步骤,在自己的case内,hiding其他的两个Body
注: 本人Axure系列的翻译blog仅供个人记录学习,侵删.
转载于:https://blog.51cto.com/gumpping/2361537