弹出面板,是我们经常使用的组件。今天,就来说说关闭弹出面板的事儿。

内容相对不那么好玩,但是挺重要,所以你需要了解。耐心阅读下,你发现并不复杂,同样是简单的。

一、自动关闭

默认情况下,弹出面板弹出后,系统在一定策略下,会自动关闭它。

试试:弹出面板弹出后,你在它的外部位置点击一下,它会自动关闭。这就是自动关闭策略在起作用。

如果你只是做一般的草图或线框图,只是有一些基本交互需要,到这里,基本就可以打住不看了。因为已经够用了。

如果还有需要,往下继续:

自动关闭策略一共有三种,分别是:

“无”:无论点击哪里,都不会自动关闭(除非你自己设置了关闭命令)。这个对于关闭的限制最强。

“点击外部”:点击弹出面板的内容区域的外面,就自动关闭。这个限制中等。

“点击所有区域”:不管点击哪里,都会自动关闭。这个限制最松。

默认地,弹出面板的关闭策略是“点击外部”自动关闭。如图:

很方便,不是吗?

这里稍微要理解下:所谓弹出面板内容区域,是个虚拟的矩形区域范围。那么这个范围有多大呢?回答是:它的大小正好可以装下弹出面板中的所有组件。超过这个区域之外,就是“外部”。见本文最后的附图。

如果你没有更多的其它要求,看到这里,可以不再继续了。

但是,不少时候,我们需要根据自己的需求,来关闭弹出面板(比如点击弹出面板中的一个指定的按钮,才关闭弹出面板),这个时候,你需要多做一点事儿了。

往下看。

二、自己设置关闭

自己设置关闭弹出面板,有两个方法,一个是“拖”,一个是“加”。

1. “拖”

如图所示,三步:

A. 双击进入弹出面板,选定一个组件(比如按钮)。

B. 拖拽它的链接点,移动到弹出面板自己“身上”(图中的背景红框)。

C. 在交互面板上,选择“弹出状态”的参数“关闭”。

2. “加”

顾名思义,就是把弹出面板作为关闭的目标对象,加上。然后对它施加关闭。

如图所示,三步:

A. 先选中弹出面板中的一个组件(比如按钮)。

B. 在交互面板上点击加号,在弹出的交互目标树中,选择“弹出面板”,双击确定。

C. 在交互面板上,选择“弹出状态”的参数“关闭”。


好了,我们已经介绍了关闭弹出面板的全部操作。

感谢你看完。关于交互的介绍,目前,这篇是打字最多的了。

===============================================

附图,弹出面板的内容区域:

Mockplus原型交互跟我做之10–关闭弹出面板的那点事儿