《Axure教程:使用中继器和动态面板制作自定义下拉框》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强中继器,交互产品,动态面板等多维度案例或实操来进行更多的学习;此教程是由一袋米GL在2021-08-20发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
本系列教程主要介绍如何使用中继器和动态面板制作自定义下拉框,包括基础下拉框、带搜索下拉框、多级联选框、时间选框等。因篇幅和时间关系,教程分为多个章节。
本章节介绍如何制作基础下拉框,首先效果图:
演示链接:http://cloud.axureshop.com/DXJ6HJ/
文章主要分为绘制元件、添加交互、文章小结三部分
1. 【选框】:绘制一个文本框,命名为“Select”,属性设置为“只读”
设置文本框“Select”交互样式:【获取焦点】改变线段颜色(Axure9新增功能,其他版本可使用矩形的【选中】效果实现);
2. 【标识】:绘制一个下拉的图标,命名为“Icon”;
3. 【滚动条】: 绘制一个动态面板,命名为“Panel”;属性设置为“垂直滚动”,并隐藏
设置动态面板“Panel”的线段颜色(Axure9新增功能,其他版本可在动态面板中添加矩形实现);
4. 在动态面板“Panel”中绘制一个中继器,命名为“Repeater”,将中继器“Repeater”中的矩形命名为“Option”,在中继器“Repeater”中添加备选数据;
设置矩形“Option”的交互样式:【悬停】改变填充颜色;
1. 为文本框“Select”的【单击时】事件添加动作:【显示】动态面板“Panel”,效果为“置于顶层”、“灯箱效果”(必须设置灯箱效果,否则交互有问题)
2. 为动态面板“Panel”的【显示时】添加动作:【旋转】图标“Icon”,效果为“顺时针180度”、“缓进缓出300ms”
为动态面板“Panel”的【隐藏时】添加动作:【旋转】图标“Icon”,效果为“逆时针180度”、“缓进缓出300ms”;
3. 为矩形“Option”【单击时】事件添加动作:【设置文本】 文本框“Select”为中继器“Repeater”中的“[[Item.Option]]”;【隐藏】动态面板“Panel”
1. 使用文本框元件作为【选框】是为了后续交互中使用【文本改变时】事件,若没有后续交互也可使用矩形元件;
2. 在中继器“Repeater”中添加辅助列可实现更多的自定义效果,如选中效果、禁用效果、默认效果等。
以上就是Axure教程:使用中继器和动态面板制作自定义下拉框的全部内容介绍了,关于更多Axure教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。
赠人玫瑰,手有余香
< 上一篇 axure9全局变量和局部变量的应用情况及操作实例
> 下一篇 Axure通过循环模拟弹幕操作实例
2022-06-09 11:40
2022-04-25 14:21
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论