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

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

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

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

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

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

展示效果如下:

相关推荐
慧都小妮子2 天前
Wyn商业智能国产数据库适配:数据接入、分析缓存与审计日志验证清单
数据库·数据分析·数据可视化·审计日志·商业智能
Flynn Liang3 天前
Apache Superset 重要特性详解(三):语义层 / 权限 / 缓存 / 嵌入的实战最佳实践(2026 版)
大数据·clickhouse·数据可视化·架构设计·superset·数据分析平台
一晌小贪欢4 天前
Python基础:第 09 篇 · while 循环:重复直到不满足
开发语言·c++·python·数据可视化·面向对象·python办公
报表开不开发7 天前
用开源报表工具SpringReport做车间大屏+Excel 导出,我踩过的一些坑,基于最初版本的设计开发
数据可视化
QuZhengRong7 天前
【Luck‑Report】 AI 智能报表助手 + RAG 知识库 + 报表引擎 V2.0.9 更新
github·agent·报表·开源项目·数据可视化
MetWeave7 天前
风的三十年:一个机场的风在变小吗:10,958 天的账(《风不是一个数》系列第 6 篇)
前端·数据可视化
AllData公司负责人8 天前
【产品便捷使用一】AIIData 数据中台:企业基础版核心能力支持,一站式全链路数据处理实操指南
大数据·前端·数据治理·数据可视化·数据开发·数据服务·数据接入
wangweilong3349 天前
把一部古典小说建模成知识图谱:红楼梦图鉴的数据、本体和单文件 HTML
数据可视化
Blockbuater_drug9 天前
《经典机器学习实战》第 2 课:回归入门——环境、工具与数据准备
线性回归·pandas·scikit-learn·数据可视化·数据清洗·最小二乘法·conda环境
FII工业富联科技服务9 天前
多智能体如何进入制造现场?从业务协同到数字孪生验证
大数据·人工智能·算法·机器人·制造·数字孪生