这是在练习Axure时找到的一个案例,自己根据博主的说明一步步操作后发现不能实现对应的效果,幸好博主提供了源文件,通过对源文件的拆解,最终实现了下拉框选项的功能。
这里采用的Axure版本
这里就在博主提供的基础上进行说明。
新建Axure文件后,
第一步是新增一个动态面板,设置一下样式,主要是设置控件的大小和显示方式,为了更好地操作,自动调整为内容尺寸前面的勾可以在完成所有功能以后去勾选上。
第二步,在前面创建的动态面板里新增一个文本框,这里划重点,必须是文本框哦,我刚开始的时候误用了矩形框,然后后期很多属性都找不到。
放入文本框后,同样地设置好样式,为了后续方便,这里需要给控件命名,这里命名为:Select
为了方便用户阅读,在文本框中增加提示信息:请选择省份,并设置文本框的属性为只读;Axure9.0中需要点击命名右侧的键符按钮进行设置
设置好样式后,可以对控件进行基本的交互属性设置,如下图所示,主要设置
禁用(:disabled)勾选元件样式 Form Disabled
提示文字(:hint)勾选元件样式 Form Hint
获取焦点(:focused)设置线段颜色,自己设置颜色,样例色号是#409EFF
第三步,在文本框中增加一个下拉框选项的标识图标,在Axure的Icon中可以直接选择拖入并命名为Icon,放在文本框的合适位置
第四步,在文本框这个图层,再添加一个动态面板并命名为Panel,这里需要设置图层隐藏,如下图所示,需要点击一下红框中的可视按钮,调整为不可视。
动态框需要选择垂直滚动条:Scroll Vertical
显示和隐藏这个动态面板时,下拉框标识图标方向指示需要明确,所以这里需要设置交互
显示时,Icon需要顺时针转180°,动画采用Ease In Out Cubic 300ms
隐藏时,Icon逆时针旋转180°,动画Ease In Out Cubic 300ms
第四步,增加中继器,在上一层动态面板中,增加下拉框中的选值,使用中继器添加对应的值。
添加后命名为Repeater,并在样式中输入选框中需要显示的值,这里是中国的省市信息
这里需要注意中继器中添加的那一项,命名了Option
设置交互,每项加载时,获取对应项中的值。目标:Option(列名),获取对应的值[[Item.Option]]
第五步,设置中继器中每一行的属性
样式设置,命名为Option
设置交互,鼠标单击时,将下拉框中选中的值赋给文本框
选中后,隐藏下拉框
做完上面的操作后,回到文本框界面,设置文本框的最后一项交互,一定要设置效果为Treat as Lightbox
至此文首所展示的效果完成。