浮层组件

在 APP 原型、Web 页面的原型设计中，经常需要用到弹窗来展示点击交互效果，为方便用户减少复杂的页面设计过程，墨刀新增了浮层组件来帮助实现弹窗效果，快速实现交互。

新建浮层

打开组件面板，在“基础组件“中选择“浮层组件”，拖拽或双击即可在画布中创建。

浮层不同于其他组件，不需要归属于某个页面中，只需确保在画布中即可。

浮层的属性设置

浮层组件相当于一个小尺寸的页面，可以添加文本、组件、图标等元素进行绘制。

1.修改尺寸

浮层的默认尺寸是宽度 300px，高度 240px，选中后可在右侧面板修改其宽高比例。

2.修改外观属性

根据自己的设计需求可以在右侧面板中修改浮层的圆角、填充色、描边和阴影。

需要注意的是，浮层的编辑虽然与页面基本相同，但不是真正的独立页面，不会显示在左侧栏的页面列表中，只会出现在图层列表中，且不支持设置尺寸设备、布局和屏幕固定区域等。

浮层的事件设置

浮层支持添加交互事件，设置交互事件的步骤与页面一致，选中元素后在右侧面板中选择添加全局事件即可设置交互行为。

1. 设置“打开浮层”

在相同原型文件中，可设置点击页面元素打开浮层的交互效果。

• 选中触发的组件元素后，拖拽【闪电】按钮到浮层上，行为选择【打开浮层】，选择要打开的浮层，即可创建“打开浮层”事件。

若画布中未创建浮层组件，在为其他元素添加事件时，选择【打开浮层】，会自动提醒当前画布中无浮层组件，需要先创建。

• 勾选【点击浮层外关闭浮层】，当点击浮层之外的区域时，将关闭当前页面最上层的浮层。

• 勾选【遮罩】选项，浮层弹出时会在下方添加背景颜色，背景颜色及透明度支持修改设置。

• 【位置】选项用于调整浮层相对于原页面（演示状态时）的位置，墨刀提供了7个预设位置项，1个自定义项（手动调整），选择【手动调整】时，页面中会出现一个与浮层尺寸相同的虚拟元素，以表示浮层将出现的位置，可手动拖拽该虚拟元素改变浮层出现在页面上的位置。

2. 设置 “关闭浮层”

“关闭浮层”的行为事件适用于浮层内部的触发元素，例如浮层中包含关闭按钮，则可设置点击关闭按钮触发关闭浮层的行为事件。

• 选中浮层中的触发元素（如图例中的关闭按钮），在右侧面板中选择【添加事件】。

• 行为选择【关闭浮层】，即可实现关闭演示画面中的浮层。

• 若页面中没有浮层对象，则关闭浮层事件行为无效。

3. 设置 “切换到浮层”

当演示页面中涉及多个浮层弹出时候，选择【切换到浮层】，可以实现在不关闭当前浮层的情况下，直接切换到另一个浮层。

• 选中已设置打开的第一个浮层，在右侧面板中添加全局事件，行为选择【切换到浮层】，选择要切换的目标浮层（目标浮层必须在本文件中）。

• 新浮层将继承原有浮层的配置（包括遮罩及遮罩模糊、点击弹窗外关闭弹窗、位置），不支持单独配置选项。