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

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

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

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

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

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

展示效果如下:

相关推荐
码界筑梦坊18 小时前
114-基于Python的1688电脑硬件数据可视化分析系统
开发语言·python·信息可视化·数据分析·毕业设计·echarts·数据可视化
黎阳之光1 天前
黎阳之光:视频孪生赋能国际盛会,定义数字孪生全球新标杆
大数据·人工智能·算法·安全·数字孪生
余丁,微生信2 天前
在线绘制Nature Genetics同款带背景的GO富集条形图
数据可视化·论文插图·生信分析·科研绘图·富集分析·科学科普·nature genetics
余丁,微生信2 天前
聚类和流向:在线绘制热图+桑基图组合图展示基因表达和所属通路
数据可视化·生信分析·科研绘图·热图·桑基图·科学科普·基因表达
泽_浪里白条3 天前
我在 Superset 6.x 做自定义图表 + Embedded SDK 集成的实战复盘(附踩坑清单)
前端·数据可视化
山海鲸实战案例分享3 天前
【数字孪生实战案例】如何配置下拉菜单,实现与电子地图飞线的数据联动查询?~山海鲸可视化
数字孪生·数据可视化·零代码·实战案例·山海鲸可视化·电子地图·数据联动
无心使然3 天前
Openlayers调用ArcGis要素服务之一 ——要素查询 (/query)
前端·javascript·数据可视化
无心使然云中漫步3 天前
Openlayers调用ArcGis地图服务之五 —— 要素识别(/identify)
前端·arcgis·vue·数据可视化
无心使然4 天前
Openlayers调用ArcGis影像服务之一动态地图、地图切片(/exportImage)
前端·javascript·数据可视化
SL-staff4 天前
中小企业 BI 选型:帆软、Power BI、JVS-BI 性价比与架构对比
数据分析·数据可视化·powerbi·帆软·bi工具·部署架构·jvs-bi