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

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

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

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

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

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

展示效果如下:

相关推荐
黎阳之光14 小时前
黎阳之光:以视频孪生领跑全球,赋能数字孪生水利智能监测新征程
大数据·人工智能·算法·安全·数字孪生
黎阳之光20 小时前
视频孪生领航者,以中国技术定义全球数智化新高度
大数据·人工智能·算法·安全·数字孪生
军军君0121 小时前
数字孪生监控大屏实战模板:可视化数字统计展示
前端·javascript·vue.js·typescript·echarts·数字孪生·前端大屏
问组生物21 小时前
在线绘制带连线的配体-受体联合热图
数据分析·数据可视化·论文插图·科研绘图·科学科普·基因表达·联合热图
漂视数字孪生世界1 天前
数字孪生开发工具对比:CIMPro孪大师 VS Cesium
数据可视化
CodeCraft Studio1 天前
LightningChart .NET v12.5.1 发布:高性能数据可视化再升级,赋能工业与实时数据场景
信息可视化·.net·gpu·数据可视化·lightningchart·高性能图表开发·数据可视化引擎
漂视数字孪生世界1 天前
数字孪生三维可视化引擎:5大选型关键指标解析
数据可视化
余丁,微生信1 天前
在线绘制饼+弧线图以展示venn交集情况
数据分析·数据可视化·论文插图·生信分析·科学科普·文恩图·基因表达
漂视数字孪生世界1 天前
数字孪生三维可视化平台有哪些?主流工具与选型指南
数据可视化
黎阳之光1 天前
黎阳之光:视频孪生领跑者,铸就中国数字科技全球竞争力
大数据·人工智能·算法·安全·数字孪生