Axure RP8 | 动态面板-多状态

动态面板:能够在一个固定的区域切换显示的内容。能实现很多动态效果。
其本身是一个透明的元件。一个动态面板里有若干个【状态】。“若动态面板是幻灯片的放映机,而状态则是幻灯片。” 打开状态的编辑界面,即可放置各种各样的元件,组成内容。
有几种特性:容器、多状态、拖动、循环、适应宽度、相对固定。

动态面板-多状态: 动态面板里的多个状态。可以通过添加交互,让某个状态的顺序切换到首位。

场景一:搜索栏内容切换(像淘宝)

1. 准备工作

制作搜索框、标签栏(填充为白色或透明,字体为橙色)

2. 设置标签栏

三个标签栏都要设置好【选中】状态的样式(填充为橙色,字体为白色),且其中一个标签栏的默认状态为【选中】;然后【设置选项组名称】为相同的,这里是“SearchTab”
设置相同的选项组名称: 为了切换标签时,实现唯一选中的效果)

标签栏

3. 设置动态面板

选中需要变化的区域,右键,转换为动态面板


动态面板

动态面板命名为SearchPanel,并双击,选中State1,并复制两个


复制

双击每个状态,修改每个状态的内容,这里修改了文本框的提示文字和框框的颜色


修改每个状态内容

为每个标签添加两个用例
一是【鼠标单击时】-【选中】-【当前元件】

选中

二是【设置面板状态】-【动态面板】-【选择对应的状态】

设置面板状态

搞定!

预览链接

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。