首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

1、表格数据录入

表头使用矩形,表格内容使用中继器,并将中继器命名为repeater;

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

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

设置中继器加载交互:

设置完成:

2、表格斑马色设置

使用此功能时需要将中继器中的元件填充色全部设为透明。

3、表格选中效果

选中background元件,设置表格背景为选项组,并设置hover和selected颜色:

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

4、新增数据

新增按钮上添加单击事件:

可输入默认呈现的数据,也添加行后再录入数据。

5、删除数据

首先增加表格行组合group点击事件,点击时标记此行:

删除时设置为按规则删除行,因为此表格实现的是一次删除一行,直接使用删除标记行时,可能会一次性删掉好几行。

删除按钮增加点击事件如下:

点击fx后设置局部变量:

局部变量设置完成后,插入刚才所设置的变量:

在交互比较复杂、重复操作的比较多时,中继器会是一个不错的选择。

— END —

撰文★董文沛

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180605A1IBVW00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券