吐司用来反馈信息或临时提醒用户，俗称提示条。

典型应用场景

原型画法（无交互）

吐司通常包含背景、文案、图标，位于页面中间。

1、先画背景。从默认元件库拖动“矩形3”到工作区合适位置，修改尺寸为195*195，修改圆角半径为20，修改填充色为#000000，不透明为50。

2、再画文案。从默认元件库拖动“三级标题”到背景中合适位置，然后双击输入文字“吐司文案”，修改字体颜色为#FFFFFF。

3、再画图标。从默认元件库拖动“图片”到背景中合适位置，修改尺寸为60*60。

4、生成原型HTML并在浏览器中查看效果。

原型画法（有交互）

吐司的常见交互效果：

• 触发一定条件，显示吐司。
• 等待了几秒后，隐藏吐司。

以“进入新页面都会检测网络。如果网络不好，就提示用户。”来讲解吐司的交互如何画出来。

5、在之前步骤的基础上，双击吐司文案，修改为“网络不稳定”。

6、选择以上元件，然后右键进行组合。

7、点击该组合元件，设置为隐藏。这样查看原型的时候默认看不到它。

8、点击工作区空白区域，然后设置“页面加载时”事件，添加动作“等待”，组织动作“1000ms”，代表刚进入页面。

9、继续添加动作“显示”，组织动作“勾选该组合元件”。代表网络不好告诉用户，建议提前命名该组合元件方便找到它。

10、继续添加动作“等待”，配置动作“等待时间2000毫秒”，代表该提示显示一段时间。

11、**添加动作“隐藏”，配置动作“勾选该组合元件“。

12、生成原型HTML并在浏览器中查看效果。