Axure如何制作下拉多选框效果

 时间:2026-02-13 19:53:37

我们在使用Axure制作原型时,常规的下拉框只支持单选下拉。那么,在Axure中如何制作下拉多选框效果呢?本文就由小编带大家了解一下,一起来看看吧~

Axure如何制作下拉多选框效果

工具/原料

Axure版本:企业版8.0.0.3338

PC电脑:Windows 7

方法/步骤

1.打开Axure,从左侧元件库拖取一个【下拉列表框】【矩形1】元件到页面。如图

Axure如何制作下拉多选框效果

2.调整一下【矩形1】的样式展示,然后右键将【矩形1】转换为动态面板,如图

Axure如何制作下拉多选框效果

3.进入动态面板【State1】设置,添加若干个【复选框】,如图

Axure如何制作下拉多选框效果

4.回到主页面,将【动态面板】设置为隐藏,如图

Axure如何制作下拉多选框效果

5.选择【下拉列表框】,在更多事件中找到【鼠标单击时】事件,设置事件为:切换显示/隐藏动态面板,设置动画效果。如图

Axure如何制作下拉多选框效果

6.完成设置后,预览结果,实现了下拉多选框效果。如图

Axure如何制作下拉多选框效果

Axure如何制作下拉多选框效果

总结:

1.打开Axure,从左侧元件库拖取一个【下拉列表框】与【矩形1】元件到页面;

2.调整一下【矩形1】的样式展示,然后右键将【矩形1】转换为动态面板;

3.进入动态面板【State1】设置,添加若干个【复选框】;

4.回到主页面,将【动态面板】设置为隐藏;

5.选择【下拉列表框】,在更多事件中找到【鼠标单击时】事件,设置事件为:切换显示/隐藏动态面板,设置动画效果;

6.完成设置后,预览结果,实现了下拉多选框效果。

注意事项

Tips:使用切换显示/隐藏动态面板的动画效果,可以更好的展示下拉弹框效果。

  • jquery改变包含指定文本td的颜色
  • 墨刀怎样查看自动标注
  • 墨刀如何制作底部菜单
  • Nomad如何打开最大采样值
  • Axure中继器如何导入表格数据?
  • 热门搜索
    儿童湿疹最佳治疗方法 牛排怎么煎好吃又简单 怎么申请企业邮箱 减肥的最快方法 红烧猪脚的家常做法 厦门好吃的 最新电视剧大全 豆腐丸子的家常做法 炖猪蹄的家常做法 刷卡机怎么用