《Axure中继器制作联级框》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强操作实例,交互产品,下拉列表框,文本框等多维度案例或实操来进行更多的学习;此教程是由崔琳在2021-07-02发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
今天给大家带来的教程是axure中继器实现下拉列表,下拉导航列表可以帮助用户更好更快的找到合适的内容,大大的提高了用户的体验感,具体步骤如下:
实例演示:https://bo2g12.axshare.com
所需原件:
联级框的制作实际上是中继器筛选能力的一个进阶用法,今天我们就来学习一下怎么制作常用的联级框吧!这次的交互会比较繁琐,大家一定要耐心看完哦!
如上图所示,拖入矩形,模拟输入框,并填入文字“请选择”,设置好【悬停】、【选中】、【获取焦点】的交互样式;文本标签作为下拉联级框的标题,按上图布局即可得到文本框模型;
如上图,拖入三个中继器,分别命名为【L1】、【L2】、【L3】作为一级、二级、三级的联级列表,并做好数据填充和【每项加载】的设置,分别将【Item.L1】、【Item.L2】、【Item.L3】赋值给到【L1】、【L2】、【L3】;
在填充数据这一步,建议大家可以像上图一样,先用 Excel 做好数据备份,以便后续修改使用,且中继器数据是支持直接通过 Excel 复制黏贴到中继器的数据表中的;
选中【L1】的中继器,双击选中【L1】文本标签,添加【单击时】设置切换选中效果的交互动作;
为【选中时】添加设置文本,将【Item.L1】赋值给到【sel_L1】的文本标签;
同时,向目标对象【L2】中继器添加筛选,规则为 [[Item.L1==TargetItem.L1]],注意勾选“移除其他筛选”
并且显示【L2】中继器,如上图设置所示;
当【取消选中时】,将【sel_L1】设置为空值,且移除【L2】的筛选,同时隐藏【L2】;
同理可以自己尝试一下设置【L2】的交互哦~
最后,【L3】的交互就相对简单一点,同样,需要设置切换选中的交互动作,但【选中时】仅需将【Item.L3】赋值给到【sel_L3】文本标签,且【取消选中时】将【sel_L3】设置为空值;
这个组件的小细节还是比较多的,我就不一一说明了,我就挑几个来说,首先是联级框的背景,在选中【L1】时,需要将背景的宽度翻倍,选中【L2】时,背景再加 1.5 倍;
中继器【L1】的文本标签【选中时】,除赋值给【sel_L1】外,需同步重置【sel_L2】、【sel_L3】的值;
中继器【L1】的文本标签【取消选中时】,隐藏【L2】、【L3】中继器;
以上就是axure制作下拉导航列表全部内容介绍了,关于更多axure9教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。
赠人玫瑰,手有余香
< 上一篇 axure中继器使用教程之制作直播视频的卡片列表操作实例
> 下一篇 Axure中继器下拉搜索教程
2022-05-30 09:21
2022-04-07 10:04
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论