折叠/抽屉/手风琴菜单 | Accordion Menu

在本教程中,你将学习如何创建一个组件,当点击一个标题时就会在它下面展开内容区域。【原型预览】

1、元件设置

创建第一个折叠菜单标题项

  1. 打开一个新的RP文件,双击页面面板下的Page 1将其在画布中打开。
  2. 元件面板中拖拽一个矩形3元件到画布中。
  3. 将矩形元件的高度设置为50(通过样式面板或样式工具栏中的H字段)。
  4. 设置矩形上的文本为“标题1”。

创建第一个折叠菜单内容项

  1. 拖拽一个矩形2元件到画布中,并将它放在矩形1元件的下面。
  2. 右键点击该矩形元件,在弹出的右键菜单中选择填充乱数假文,以将矩形填充上文本。
  3. 再次右键点击该矩形元件,然后选择转换为动态面板
  4. 将动态面板隐藏(选中它,点击样式面板或样式工具栏中的隐藏图标)。

将标题和内容元件组合

  1. 选中标题1矩形元件和动态面板,然后点击顶部的组合,将它们放入一个元件组。
  2. 设置元件组的名称为“折叠项目1”。
2、点击标题时切换内容的可见性
  1. 选中标题1矩形元件,点击交互面板中的单击时,设置可见性
  2. 目标下拉列表中选择动态面板,然后在它下面的选项中选择切换
  3. 点击该动作设置区底部的更多选项,然后在下拉列表中选择推动和拉动元件
  4. 保留下面单选按钮的选项,然后点击确定按钮保存操作。
3、复制元件组合以创建更多折叠项目

创建第二个项目

  1. 右键点击折叠项目1元件组合,选择复制,然后在画布的空白区域点击右键,选择粘贴
  2. 重命名这个新的元件组合为“折叠项目2”,并将它的标题矩形上的文本设置为“标题2”。
  3. 调整折叠项目2组合的位置,其标题2矩形恰好在标题1矩形的下面。

创建第三个项目

  1. 重复以上步骤来创建第三个元件组合,设置组合的名称为“折叠项目3”,设置标题为“标题3”,然后将它放在标题2矩形的下面。
4、预览交互

预览页面,点击折叠菜单的标题,将会展开与其对应的内容动态面板。

其他信息和提示

当展开新项目时折叠已展开的项目【原型预览】

如果你想只能有一个折叠项目处于展开状态,在每个标题的单击时事件下再增加一个显示/隐藏动作,当点击时隐藏其他动态面板。例如:点击标题1的时候,会隐藏折叠项目2折叠项目3下的动态面板。

提示:当隐藏动态面板的时候,不要忘记选择拉动元件。

评论(0)

发表评论

电子邮件地址不会被公开。 必填项已用*标注