Axure RP是一款快速原型设计工具,它不需要使用者有编程基础,就可以实现出一些复杂交互效果的产品原型,常用于互联网产品设计、网页设计、app设计等领域。作为常用的原型绘制软件,Axure提供了较为强大的功能,可以满足一些复杂的交互稿设计。从Axure7.0开始,新增了中继器的组件,今天简单介绍下如何使用中继器实现集增删改、选中、交替底色填充为一体表格。
1、表格数据录入
表头使用矩形,表格内容使用中继器,并将中继器命名为repeater;
双击中继器进入编辑页,拖入矩形元件和文本输入框,为了方便后续设置值,文本输入框命名与表头对应,分别为name、status、time;矩形命名为background。将四个元件设置为一个组合,命名为group,方便后续操作。
在中继器里输入需要录入的表格数据,如下:
设置中继器加载交互:
设置完成:
2、表格斑马色设置
使用此功能时需要将中继器中的元件填充色全部设为透明。
3、表格选中效果
选中background元件,设置表格背景为选项组,并设置hover和selected颜色:
给表格行组合group添加单击事件:
4、新增数据
新增按钮上添加单击事件:
可输入默认呈现的数据,也添加行后再录入数据。
5、删除数据
首先增加表格行组合group点击事件,点击时标记此行:
删除时设置为按规则删除行,因为此表格实现的是一次删除一行,直接使用删除标记行时,可能会一次性删掉好几行。
删除按钮增加点击事件如下:
点击fx后设置局部变量:
局部变量设置完成后,插入刚才所设置的变量:
在交互比较复杂、重复操作的比较多时,中继器会是一个不错的选择。
— END —
撰文★董文沛
领取专属 10元无门槛券
私享最新 技术干货