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

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

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

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

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

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

展示效果如下:

相关推荐
Highcharts.js8 小时前
基于Highcharts开发的OHLC 股票K线图完全指南
javascript·信息可视化·echarts·数据可视化·highcharts·ohlc
游戏新手村8 小时前
蝴蝶图在餐饮门店数据可视化中的应用
大数据·信息可视化·产品经理·数据可视化
飞龙14775657467509 小时前
从零玩转 Manim #2:阶段 1 实战 —— 11 个例子写出第一个"圆→方→三角"变身动画
数据可视化
一根数据线14 小时前
你还在用无人机飞倾斜摄影来创建模型吗?
3d建模·无人机·数字孪生·倾斜摄影·ai建模·建模工具·造形家
johnny2332 天前
数据可视化平台:Flourish、Basedash、Datart、DataWrapper、Shaper、Edalitics
数据可视化
weixin_424813752 天前
数字孪生应用案例精选:智慧城市、智慧水利、工业制造
智慧城市·数字孪生·智慧水利·案例分析·工业制造
iwgh4 天前
20260726 会议室空间智能及数字孪生方案畅想
数字孪生·空间智能·小落同学·会议室空间管理
太平洋月光5 天前
Antv G2中自定义技巧📊
前端·数据可视化
易知微EasyV数据可视化6 天前
工业制造如何实现柔性规划?数字孪生技术助力产线布局编排与方案推演
人工智能·经验分享·制造·数字孪生·可视化·三维建模
那些年丶ny6 天前
颜色扩展库
前端·javascript·数据可视化