不用编程,一个中继器就能搞定动态表格

阅读数:2 2019 年 12 月 31 日 16:30

不用编程,一个中继器就能搞定动态表格

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

评论

发布