
Axure RP 是一款快速原型设计工具,它不需要使用者有编程基础,就可以实现出一些复杂交互效果的产品原型,常用于互联网产品设计、网页设计、app 设计等领域。作为常用的原型绘制软件,Axure 提供了较为强大的功能,可以满足一些复杂的交互稿设计。从 Axure7.0 开始,新增了中继器的组件,今天简单介绍下如何使用中继器实现集增删改、选中、交替底色填充为一体表格。
1、表格数据录入
表头使用矩形,表格内容使用中继器,并将中继器命名为 repeater;

双击中继器进入编辑页,拖入矩形元件和文本输入框,为了方便后续设置值,文本输入框命名与表头对应,分别为 name、status、time;矩形命名为 background。将四个元件设置为一个组合,命名为 group,方便后续操作。

在中继器里输入需要录入的表格数据,如下:

设置中继器加载交互:

设置完成:

2、表格斑马色设置

使用此功能时需要将中继器中的元件填充色全部设为透明。
3、表格选中效果
选中 background 元件,设置表格背景为选项组,并设置 hover 和 selected 颜色:

给表格行组合 group 添加单击事件:

本文转载自 Think 体验设计公众号。
原文链接:https://mp.weixin.qq.com/s/m2gMVqA8YmrXV3B0rRjtDw
评论