下拉列表框是很常用的元件,Axure元件库也提供了下拉列表框,但是Axure提供的下拉框不够美观,这里我们发扬造轮子的精神,自己定义下拉框。
我们先看一下制作好的省份选择的下拉框:
![c13c21bfde913aead527b5288b9bc058.png](https://img-blog.csdnimg.cn/img_convert/c13c21bfde913aead527b5288b9bc058.png)
效果预览:http://www.axurestudy.cn/pr/index.html
【需求分析】
1、下拉列表分成初始状态、初始状态下显示请选择字样,下拉箭头朝下;
2、当鼠标点击的时候,下拉框的的边框变成蓝色,下拉箭头朝上,并且展示下拉列表数据项;
3、当鼠标在下拉列表项上移动的时候,选项变成蓝色;
4、单点击其中一个数据项的时候,下拉框收起,在下拉框里面显示选中项;
![4f006f761640884251897013a9c87385.png](https://img-blog.csdnimg.cn/img_convert/4f006f761640884251897013a9c87385.png)
【原型设计】
1、现在画布拖入一个矩形框province,并且在矩形框里面输入Font AweSome图标
,字符靠右对齐,如果不会使用Font AweSome的同学,请查看如何使用字体图标ÿ