今天在为前端通过画交互图时,一个交互场景期望用toast来实现消息提醒,特此记录,希望能为axure新手提供参考。
Toast是一种弱提示,本质是在页面中默认隐藏,触发动作以后,提示框先弹出后自动消失。
假设场景是点击一个button后弹出提示框,1秒钟后提示框消失,具体实现步骤如下:
1 控件准备
拖入按钮、动态面板控件;
设置按钮上的文字,比如这里是“点我弹toast”,这里是自定义的;
动态面板的名字命名为“我是toast”,这里也是自定义的;
双击动态面板,进入sate1,拖入控件,设置提示语"我只出现1s,请珍惜!”;
右击动态面板,选择set hidden;
右击动态面板,选择pin to browser,选择弹出的位置在页面中间位置;
2 设置按钮触发动作
下面我们拆解toast发生的顺序,点击按钮后是有两个动作,一个弹出提示框,二是等待1s后消失,那么我们按照这个思路来设置
首先设置onclick事件,show “我是toast”
接下来是设置等待1s然后消失的动作
点击“Add Case”后增加case2,设置等待时间(此处设置1s)和隐藏提示框
设置等待时间方法如下:
好了,设置后preview后发现没达到预期的效果:
因为设置的case1和case2同时发生了,需要手动选择case,那么有什么办法是可以自动进行下去呢?答案是加两个一定能满足的if条件,比如在case1和case2中分别增加如下条件
case2的默认条件是else if条件,右击case2,点击“Toggle IF/ELSE IF”,使得case1和case2的判断条件”是并列的,同时触发。
然后保存,preview就可以看到效果啦~