猿型库：Axure小练习之自定义下拉框
下拉列表框是很常用的元件，Axure元件库也提供了下拉列表框，但是Axure提供的下拉框不够美观，这里我们发扬造*的精神，自己定义下拉框。
我们先看一下制作好的省份选择的下拉框：
效果预览：http://www.axurestudy.cn/pr/index.html
https://pan.baidu.com/s/1lCILNe89kdRGbtfzDwYvpg
提取码：t7pf
【需求分析】
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资源；