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

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

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

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

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

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

展示效果如下:

相关推荐
NocoBase7 小时前
【2.0 教程】第 2 章:数据建模,两张表搞定工单系统
人工智能·开源·零代码·无代码
图扑数字孪生8 小时前
火灾监测 Web GIS 可视化平台搭建,森林消防智慧预警技术实现
数字孪生·智慧消防·低代码数字孪生·森林消防
harrain11 小时前
数字孪生外业测量数据采集
数字孪生
statistican_ABin11 小时前
Python数据分析-宝马全球汽车销售数据分析(可视化分析)
大数据·人工智能·数据分析·汽车·数据可视化
星野云联AIoT技术洞察1 天前
2026 年 MCP + MQTT:AI Agent 真正控制 IoT 设备的落地路径
数字孪生·ack·ai agent·物联网平台·agentic·mcp·命令服务
黎阳之光1 天前
十五五智赋新程 黎阳之光以AI硬核技术筑造产业数智底座
大数据·人工智能·算法·安全·数字孪生
李昊哲小课1 天前
matplotlib_tutorial
数据分析·matplotlib·数据可视化
柳杉2 天前
从动漫水面到赛博飞船:这位开发者的Three.js作品太惊艳了
前端·javascript·数据可视化
Triv20252 天前
太阳能船远程信息处理:CAN数据记录 + Grafana仪表板实战案例
grafana·数据可视化·influxdb·嵌入式系统·can总线·数据采集与监控·智能船舶