Axure制作:自制“下拉框”控件

 时间:2024-10-12 03:54:07

1、先拖出1个“矩形”、1个“文本框”、1个“热区”及1个“图标:三角”如下图所示:

Axure制作:自制“下拉框”控件Axure制作:自制“下拉框”控件

5、设置“文本标签”尺寸200*30;命名:option1;内容:“下拉框设计-选项1";填充:左30、上5、右5、下5;设置“图标:圆形”尺寸6*6;命名:option1;不透明:60%

6、额外设置“文本标签”的“鼠标悬停”效果:颜色为#CCCCCC,不透明度30%

Axure制作:自制“下拉框”控件

8、“选项1”样式再复制3份,并新建一个“矩形”,如下图所示:

Axure制作:自制“下拉框”控件

10、按如下图示布局,组合成“选项组”样式,命名为:“option_all”:---注意部分”小圆点“设置为“隐藏”

Axure制作:自制“下拉框”控件

12、自制“下拉框”控件布局完成,下面是对各个布局做互动交互~

13、首先是“热区:zone”的“鼠标单击时”的动作:

Axure制作:自制“下拉框”控件

15、动作2:---移动“组合:option_all”到指定位置(x,y)---

Axure制作:自制“下拉框”控件

17、Y坐标值:[[this.y+this.height]]

Axure制作:自制“下拉框”控件

19、动作1:---设置”文本框:option“内容:[[this.text]]---(议陬涸渎即把此”矩形:option1“的文本内容复制到”文本框:option“)

Axure制作:自制“下拉框”控件

21、动作3:---移动“组合:option_all”:在垂直位置上移-15;动画效果:逐渐;时间:200毫秒;---

Axure制作:自制“下拉框”控件

23、”矩形:option2“、”艏婊锬曛矩形:option3“、”矩形:option4“的交互类似,无非需要注意的是隐藏“图标:小圆点”的顺序,不要搞错啦~

24、全部设置完后,验证下效果吧……

Axure制作:自制“下拉框”控件

25、觉得不错的话,请投个票,加个赞哦~

  • Axure | 怎么设置按钮点击后为不同状态
  • Axure交互如何设置时间类型文本框?
  • axure图标固定于浏览器某处,鼠标移入弹出
  • 教大家使用Axure制作带清空按钮的Select选择器
  • axure根据元件文字执行交互事件
  • 热门搜索
    翌日是什么意思 腾讯大王卡19元套餐包含什么 南柯一梦的意思 复活节是什么意思 盈香生态园有什么玩 给老师的祝福语 什么粤语歌好听 知无不言是什么意思 汽车上牌需要什么手续 妇孺皆知是什么意思