当前位置: 首页 > article >正文

Axure复选框全选反选取消高级交互

亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢!

课程主题:复选框全选反选取消制作

主要内容:点击复选框,实现列表数据项全选选中、反选和取消选中效果

应用场景:多项选定、一键全选、一键取消、一键反选

案例展示:

案例视频

复选框演示视频


正文内容:实现复选框点击全选/取消全选;实现下拉弹窗一键全选、一键反选、全部取消。

1、复选框点击全选/取消全选

步骤一:拖入复选框并命名为中继器外复选框,提示信息“选择”,下箭头icon;在中继器中添加复选框,并命名中继器内复选框;命名的目的是下一步做交互时好辨识。

步骤二:添加中继器外复选框的交互,选中时——两个复选框值为真,取消选中时——两个复选框值为假;

2、实现下拉弹窗一键全选、一键反选、全部取消

步骤一:制作弹窗,包含弹窗背景、一键全选、一键反选、全部取消元件;组合命名为“选择弹窗”,载入时隐藏这个弹窗;

步骤二:添加下箭头交互,单击时——切换选择弹窗可见性;

步骤三:添加一键全选交互,全选时内外复选框的值均为真;

步骤四:添加一键反选交互,反选时外部复选框值为假,内部复选框可能有选中的项,所以要选择切换;

步骤五:添加全部取消交互,值全部为假;

本课小结:掌握复选框相关知识点,真、假、切换三种值的内涵;选中时与取消选中时如何选择值,以及用户体验交互设计,如何让用户用的舒服和方便。


相关课程直通车:

中继器实现时间读取和修改-CSDN博客

Axure横向菜单高级交互-CSDN博客

Axure垂直菜单展开与折叠-CSDN博客

Axure树形菜单展开与折叠-CSDN博客

如有其他相关问题,欢迎私信沟通,关注  结构化知识课堂-CSDN博客

明天的产品大咖就是你,创作不易,麻烦关注一下,点赞+收藏,感谢大家!


http://www.kler.cn/news/358980.html

相关文章:

  • 如何用bat脚本修改windows环境下jenkins服务的登陆密码
  • 展望机器学习和神经网络的未来
  • 【Python】基础--文件处理
  • C++,STL 035(24.10.20)
  • 蜘蛛日志在线分析工具源码 快速分析搜索引擎网络爬虫抓取记录
  • react18中实现简易增删改查useReducer搭配useContext的高级用法
  • Python中3个常见网络爬虫库
  • 019_Baseline_optimization_in_Matlab中考虑优化的基线方法
  • AOC商用显示器打造金融行业解决方案,搭建金融服务新模式!
  • 前端权限:接口权限,路由权限,按钮权限
  • 贪心算法笔记
  • 笔记本电脑U口保护分享
  • Vue利用axios发送请求并代理请求
  • 国产服务器KyLinV10操作系统部署harbor仓库时报错:open /etc/registry/passwd: permission denied
  • 计算机视觉——人像的分割与无缝融合
  • ORACLE 19C安装 RAC报错
  • RPC通讯基础原理
  • 计算机毕业设计Python动漫视频分析可视化 动漫影视可视化 动漫情感分析 动漫爬虫 机器学习 深度学习 Tensorflow PyTorch LSTM模型
  • 每天一个数据分析题(五百零八)- 机器学习模型
  • PPT自动化:Python如何修改PPT文字和样式!