【数字孪生实战案例】怎样实现点击一个按钮后,其他按钮自动恢复为默认样式?~山海鲸可视化

在可视化界面与大屏交互设计中,按钮组的状态统一管理是提升体验的关键。如何实现点击一个按钮时自动重置其他按钮为默认样式,让选中状态清晰唯一,本文将简要介绍这一实用交互的实现思路。

1.在左侧组件库添加两个**"按钮"**组件至项目中

接着选中左侧的图层按钮,右键选择**"重命名"**,便于后续添加交互时快速识别并勾选对应组件。

2.选中按钮 1,在右侧**"样式"** 面板中进入**"样式设置"** ,在**"选中后"** 选项下开启**"启用选中"** ;并在**"文字样式"** 中调整**"字体"**大小与颜色,以便清晰区分状态。

3.选中按钮 2,在右侧配置栏选择**"交互"** 设置,触发**"点击"** 事件并执行**"自定义"** 动作;将目标组件设为 "按钮 1" ,自定义动作选择 **"取消按钮选中"**即可。

展示效果如下:

相关推荐
躺柒2 天前
读数据可视化08数据(上)
大数据·信息可视化·数据分析·数据可视化·视觉·可视化分析
@HNUSTer3 天前
Python数据可视化科技图表绘制系列教程(八)
python·数据可视化·科技论文·专业制图·科研图表
诺斯顿_三维扫描3 天前
文物3d扫描建模-诺斯顿
数字孪生·三维扫描·3d扫描·三维数字化·三维扫描服务
慧都小妮子4 天前
前端实现复杂公式计算:SpreadJS 在京东物流 Udata 平台的落地实践
javascript·数据分析·excel·数据可视化·spreadjs·前端表格控件
点量云实时渲染-小芹4 天前
数字孪生虚拟仿真模型UE/Unity,国产信创实时渲染推流需做哪些改造?
数字孪生·pixel streaming·信创实时云渲染·ue信创推流·unity信创云渲染
Highcharts4 天前
如何选择正确的图表:驱动理解和洞察力的三部分框架(第3部分)
前端·数据可视化
Highcharts4 天前
全功能施工项目管理甘特图 Demo:任务依赖箭头、当前日期标线、周末高亮、分组项目可视化
html·数据可视化
CoovallyAIHub5 天前
系统越上越多、问题越查越慢,制造业厂长的真实痛点
人工智能·agent·数据可视化
Highcharts.js7 天前
可视化图表之甘特图Gantt:原理、应用与实践指南
甘特图·数据可视化·highcharts·图表渲染
Highcharts.js7 天前
Highcharts大数据渲染模块Boost实战与参数最佳实践表
javascript·数据可视化·boost·highcharts·大数据渲染·加速配置·参数表