利用Axure的动态面板和中继器完成下拉框选择功能

时间:2024-04-02 12:53:24

这是在练习Axure时找到的一个案例,自己根据博主的说明一步步操作后发现不能实现对应的效果,幸好博主提供了源文件,通过对源文件的拆解,最终实现了下拉框选项的功能。

这里采用的Axure版本

利用Axure的动态面板和中继器完成下拉框选择功能

这里就在博主提供的基础上进行说明。

利用Axure的动态面板和中继器完成下拉框选择功能

新建Axure文件后,

第一步是新增一个动态面板,设置一下样式,主要是设置控件的大小和显示方式,为了更好地操作,自动调整为内容尺寸前面的勾可以在完成所有功能以后去勾选上。

利用Axure的动态面板和中继器完成下拉框选择功能

第二步,在前面创建的动态面板里新增一个文本框,这里划重点,必须是文本框哦,我刚开始的时候误用了矩形框,然后后期很多属性都找不到。

利用Axure的动态面板和中继器完成下拉框选择功能

放入文本框后,同样地设置好样式,为了后续方便,这里需要给控件命名,这里命名为:Select

利用Axure的动态面板和中继器完成下拉框选择功能

为了方便用户阅读,在文本框中增加提示信息:请选择省份,并设置文本框的属性为只读;Axure9.0中需要点击命名右侧的键符按钮进行设置

利用Axure的动态面板和中继器完成下拉框选择功能

设置好样式后,可以对控件进行基本的交互属性设置,如下图所示,主要设置

禁用(:disabled)勾选元件样式 Form Disabled

提示文字(:hint)勾选元件样式 Form Hint

获取焦点(:focused)设置线段颜色,自己设置颜色,样例色号是#409EFF

利用Axure的动态面板和中继器完成下拉框选择功能

第三步,在文本框中增加一个下拉框选项的标识图标,在Axure的Icon中可以直接选择拖入并命名为Icon,放在文本框的合适位置

第四步,在文本框这个图层,再添加一个动态面板并命名为Panel,这里需要设置图层隐藏,如下图所示,需要点击一下红框中的可视按钮,调整为不可视。

动态框需要选择垂直滚动条:Scroll Vertical

利用Axure的动态面板和中继器完成下拉框选择功能

显示和隐藏这个动态面板时,下拉框标识图标方向指示需要明确,所以这里需要设置交互

显示时,Icon需要顺时针转180°,动画采用Ease In Out Cubic 300ms

利用Axure的动态面板和中继器完成下拉框选择功能

隐藏时,Icon逆时针旋转180°,动画Ease In Out Cubic 300ms

利用Axure的动态面板和中继器完成下拉框选择功能

第四步,增加中继器,在上一层动态面板中,增加下拉框中的选值,使用中继器添加对应的值。

添加后命名为Repeater,并在样式中输入选框中需要显示的值,这里是中国的省市信息

这里需要注意中继器中添加的那一项,命名了Option

利用Axure的动态面板和中继器完成下拉框选择功能

设置交互,每项加载时,获取对应项中的值。目标:Option(列名),获取对应的值[[Item.Option]]

利用Axure的动态面板和中继器完成下拉框选择功能

第五步,设置中继器中每一行的属性

样式设置,命名为Option

利用Axure的动态面板和中继器完成下拉框选择功能

设置交互,鼠标单击时,将下拉框中选中的值赋给文本框

利用Axure的动态面板和中继器完成下拉框选择功能

选中后,隐藏下拉框

利用Axure的动态面板和中继器完成下拉框选择功能

做完上面的操作后,回到文本框界面,设置文本框的最后一项交互,一定要设置效果为Treat as Lightbox

利用Axure的动态面板和中继器完成下拉框选择功能

至此文首所展示的效果完成。