![不用编程,一个中继器就能搞定动态表格](https://static001.infoq.cn/resource/image/27/61/27dcfb0207027106fa6ba64267a8e961.jpg)
Axure RP 是一款快速原型设计工具,它不需要使用者有编程基础,就可以实现出一些复杂交互效果的产品原型,常用于互联网产品设计、网页设计、app 设计等领域。作为常用的原型绘制软件,Axure 提供了较为强大的功能,可以满足一些复杂的交互稿设计。从 Axure7.0 开始,新增了中继器的组件,今天简单介绍下如何使用中继器实现集增删改、选中、交替底色填充为一体表格。
1、表格数据录入
表头使用矩形,表格内容使用中继器,并将中继器命名为 repeater;
![](https://static001.infoq.cn/resource/image/31/cf/3173178c5696930a822fa7f0bda6dacf.jpg)
双击中继器进入编辑页,拖入矩形元件和文本输入框,为了方便后续设置值,文本输入框命名与表头对应,分别为 name、status、time;矩形命名为 background。将四个元件设置为一个组合,命名为 group,方便后续操作。
![](https://static001.infoq.cn/resource/image/67/61/67d7d35557df3e9d019f262870756961.jpg)
在中继器里输入需要录入的表格数据,如下:
![](https://static001.infoq.cn/resource/image/6f/17/6f828b4417f4bd834d5aa9a25477fd17.jpg)
设置中继器加载交互:
![](https://static001.infoq.cn/resource/image/2e/46/2e8f9e04f7e300523510fdced0a89846.jpg)
设置完成:
![](https://static001.infoq.cn/resource/image/9e/22/9edfa44937b732f4d67b3e584a730822.jpg)
2、表格斑马色设置
![](https://static001.infoq.cn/resource/image/d7/ae/d7b22a818c67cf45a3dd1cbfe4ec7fae.jpg)
使用此功能时需要将中继器中的元件填充色全部设为透明。
3、表格选中效果
选中 background 元件,设置表格背景为选项组,并设置 hover 和 selected 颜色:
![](https://static001.infoq.cn/resource/image/2b/45/2b7b5e538ac47e271295d21e8c4b8045.jpg)
给表格行组合 group 添加单击事件:
![](https://static001.infoq.cn/resource/image/53/5f/53af0acd458dc8cfcc44abfce04bc35f.jpg)
本文转载自 Think 体验设计公众号。
原文链接:https://mp.weixin.qq.com/s/m2gMVqA8YmrXV3B0rRjtDw
评论