隐藏和显示元件 | Hiding and Showing Widgets

在本教程中，您将学习如何在Web浏览器中动态显示和隐藏元件。【原型预览】

1、元件设置

1. 打开一个新的RP文件，双击页面面板中的Page 1以将其在画布中打开。
2. 在元件库中拖拽一个占位符元件和三个按钮元件到画布中。
3. 将按钮上的文字分别改为“显示”、“隐藏”和“切换”。
4. 选中占位符元件，点击样式工具栏或样式面板中的隐藏图表以将其隐藏。

2、点击按钮时设置占位符元件的可见性

显示按钮

1. 选中显示按钮，在交互面板中点击单击时，设置可见性。
2. 在弹出的下拉列表中选择占位符元件。
3. 保持显示为选中状态，点击确定按钮保存操作。

隐藏按钮

1. 在隐藏按钮上重复以上步骤，但是要选择隐藏而不是显示。

切换按钮

1. 在切换按钮上重复以上步骤，但是要选择切换而不是显示。

3、预览交互

1. 预览页面，然后点击显示按钮来显示隐藏的占位符元件。
2. 点击隐藏按钮再将占位符元件隐藏。
3. 点击几次切换按钮，以交替显示或隐藏占位符元件。

其他信息和提示

动画

在显示和隐藏元件的时候，你可以使用一些动画效果，包括淡入淡出、滑动和翻转。这些可以在显示/隐藏动作的动画下拉列表中找到，在下拉列表中选择动画类型，然后在旁边的字段中设置动画的持续时间（以毫秒为单位）。

置于顶层

当使用显示或切换动作来显示元件时，你可以勾选更多选项下的置于顶层复选框，以使元件可以自动的至于当前设计的顶层，这样就可以确保显示该元件时不会被其他元件遮挡。

灯箱效果

当使用显示动作来显示一个元件时，你可以选择将其以灯箱的形式显示，该选项位于显示/隐藏动作底部的更多选项的下拉列表中。

设置了灯箱效果的元件在显示时，会在其后面带有彩色的遮罩，以遮住页面的其余部分。点击遮罩上的任意位置可以再次将元件隐藏。当选择了灯箱效果后，你可以通过设置其背景颜色来更改遮罩的颜色和透明度。

弹出菜单

当使用显示动作来显示一个元件时，你可以选择将其以弹出的形式显示。只要光标停留在它上面或者用来显示它的元件上面，这个弹出显示的元件就会一直显示，一旦光标离开了那个元件区域，这个弹出的元件就会再次自动隐藏。

举个例子，当你查看导航菜单的子菜单时，或是页面元素的提示信息时，你可能会卡到弹出效果。

该选项位于显示/隐藏动作底部的更多选项的下拉列表中。

推/拉元件

当显示一个元件时，你可以将页面上的其他元件向下或向右推开，以便为要显示的元件腾出空间。当隐藏一个元件时，你可以将页面上的其他元件向上或向左拉回来，以便填充隐藏元件留下的空白区域。

该选项位于显示/隐藏动作底部的更多选项的下拉列表中。