猿型库:Axure小练习之自定义下拉框

下拉列表框是很常用的元件,Axure元件库也提供了下拉列表框,但是Axure提供的下拉框不够美观,这里我们发扬造轮子的精神,自己定义下拉框。

我们先看一下制作好的省份选择的下拉框:


效果预览:http://www.axurestudy.cn/pr/index.html

【需求分析】

1、下拉列表分成初始状态、初始状态下显示请选择字样,下拉箭头朝下;

2、当鼠标点击的时候,下拉框的的边框变成蓝色,下拉箭头朝上,并且展示下拉列表数据项;

3、当鼠标在下拉列表项上移动的时候,选项变成蓝色;

4、单点击其中一个数据项的时候,下拉框收起,在下拉框里面显示选中项;


【原型设计】

1、现在画布拖入一个矩形框province,并且在矩形框里面输入Font AweSome图标字符靠右对齐,如果不会使用Font AweSome的同学,请查看如何使用字体图标;

2、在矩形框里面拖入一个输入框input,边框设置为0,录入文字“ 请选择 ”;


3、拖入一个中继器,在数据源里面录入省份名称数据;


4、点击右键,把中继器转换为动态面板,设置动态面板高度为合适的高度,并且设置动态面板为垂直方面滚动;

5、设置动态面板为隐藏状态;

至此,自定义下拉列表的原型已经制作完成,现在的效果如下所示:


【交互设计】

1、设置矩形框province的交互样式,当矩形框为选中的时候,设置边框颜色为蓝色;


2、输入框PInput和矩形框Province组合,设置该组合的点击事件,当鼠标单击的时候,设置矩形框Province在选中和取消选中之间进行切换;


3、设置矩形框Province的选中事件,当Province被选中,设置切换为,并且展示动态面板;当Province取消选中的时候,为并且隐藏动态面板;


4、设置中继器的记录的交互状态,当鼠标悬浮的时候,修改矩形框的填充颜色;


5、当选中中继器的一个记录的时候,设置输入框的值为选中值,并且隐藏下拉列表;


到了这里,自定义下拉列表框就制作好了,同学们赶紧去试试吧。



回复【入门】 ,获取零基础Axure快速入门视频教程;

回复【安装】 ,获取安装程序;

回复【练习】 ,获取练习案例;

回复【高保真】,获取高保真原型;

关注微信公众号【猿型库】,获取更多优质Axure资源;

你可能感兴趣的:(猿型库:Axure小练习之自定义下拉框)