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

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

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

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

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

案例展示:

案例视频

复选框演示视频


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

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

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

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

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

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

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

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

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

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

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


相关课程直通车:

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

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

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

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

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

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

相关推荐
Jason_zhao_MR5 小时前
RK3576机器人核心:三屏异显+八路摄像头,重塑机器人交互与感知
linux·人工智能·嵌入式硬件·计算机视觉·机器人·嵌入式·交互
披着羊皮不是狼12 小时前
HTTP 与 API 入门:理解前后端交互原理
java·网络协议·http·交互
长沙红胖子Qt17 小时前
VTK开发笔记(八):示例Cone5,交互器的实现方式,在Qt窗口中详解复现对应的Demo
qt·vtk·交互·交互器
Predestination王瀞潞20 小时前
WEB前端技术基础(第四章:JavaScript-网页动态交互语言)
前端·javascript·交互
一个处女座的程序猿1 天前
LLMs之PE:PromptX(将 AI 智能体从通用助手转变为具备行业/角色能力的交互平台)的简介、安装和使用方法、案例应用之详细攻略
人工智能·交互·agent·promptx
小龙报2 天前
《赋能AI解锁Coze智能体搭建核心技能(1)--- 初识coze》
人工智能·语言模型·数据分析·交互·文心一言·机器翻译·coze
asdfsdgss2 天前
Axure 组件不用手绘:ElementUI/Plus 元件库 + 大厂规范现成资源
elementui·axure·photoshop
科技快报2 天前
引入实时 3D 渲染技术,地平线与 Unity 开启车载交互空间化时代
3d·unity·交互
一个处女座的程序猿O(∩_∩)O3 天前
实现 AI 流式响应:从等待到实时交互的技术解析
网络·人工智能·交互
这张生成的图像能检测吗4 天前
(论文速读)InteractVLM: 基于2D基础模型的3D交互推理
人工智能·计算机视觉·交互·生成模型·图像生成·视觉语言模型·3d重建