页签菜单 | Tab Menu

在本教程中,你将学习如何创建一个组件,点击组件中的一个页签,就可以显示该页签下的内容。【原型预览】

1、元件设置

创建页签元件

  1. 打开一个新的RP文件,双击页面面板中的Page 1将其在画布中打开。
  2. 元件面板中拖拽两个按钮元件到画布中。
  3. 将按钮上的文字改为:“页签1”和“页签2”。
  4. 通过样式面板或样式工具栏中的填充颜色选择器,将页签1填充成蓝色,将页签2填充成红色。
  5. 选中两个按钮,通过样式面板中的圆角可见性控制,取消按钮底部的圆角设置,这样就可以是两个按钮顶部是圆角,底部是直角(页签的形状)。

创建内容元件

  1. 拖拽一个矩形元件到画布中,并将它放在两个按钮下面。
  2. 将矩形元件填充为蓝色,并设置它的文本为“页签1的内容”。
  3. 再拖拽一个矩形元件到画布中,并放在第一个矩形元件的右边。
  4. 将第二个矩形元件填充为红色,并设置它的文本为“页签2的内容”。
2、将这两个矩形元件放进动态面板的两个状态中
  1. 页签1的内容矩形元件上点击鼠标右键,在弹出的右键菜单中选择转换为动态面板
  2. 概要面板下,将鼠标放在新建的动态面板上,然后点击右侧的添加状态图表。
  1. 概要面板中,选中页签2的内容矩形元件,将它拖拽到动态面板State2下面,这样可以将它添加到动态面板中并打开动态面板编辑窗口。
  2. 在画布中将页签2的内容矩形元件移动到坐标(0.0)的位置。
  3. 点击画布右上角的关闭按钮或按ESC键退出状态编辑模式。

注意:在创建你自己的页签控件时,你可以将任何你喜欢的元件添加到动态面板状态中。

3、点击页签时设置动态面板状态
  1. 选中页签1元件,点击交互面板中的新建交互
  2. 在弹出的列表中选择单击时事件,然后选择设置面板状态动作。
  3. 目标的下拉列表中选择动态面板,然后在STATE下拉列表中选择State1
  4. 点击确定按钮保存操作。
  5. 针对页签2元件重复以上步骤,设置动态面板的状态为State2
4、预览交互

预览页面,点击页签以查看其相关的内容。

其他信息和提示

显示页签的激活状态【原型预览】

如果你创建了一个所有页签颜色一样的页签控件,你可以通过设置页签的选中效果,来区别激活的页签。

  1. 选中所有页签元件,将它们添加到选项组。
  2. 启用页签元件的选中样式,并设置你想要的样式属性。
  3. 在每个页签元件的单击时事件下,添加设置选中动作,然后在目标下拉列表中选择当前元件
评论(0)

发表评论

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