【仪表板-外观美化】多个仪表板切换的实现方案

收藏

本帖最后由 Bella.Yuan 于 2023-1-5 18:47 编辑

最近碰到有很多小伙伴经常都有这样的需求：设计了多个仪表板，每个仪表板分别展示一个主题，然后这几个仪表板之间进行多页面切换。今天这篇教程呢，就给大家介绍一下，在Wyn中都有哪些方法可以实现这个需求。
image.png302425841.png

其实这个问题呢，可以分情况来看：
一、如果您还未开始设计，或者目前只设计了一个仪表板，那么最简单的办法就是采用我们仪表板的多页面功能。
image.png992658386.png

在设计器底部根据需要添加多个页签，然后在新页面设计新的主题的仪表板。这样设计出来呢，就只有一个仪表板文件，只是在其中有多个页面，同时也可以在全局设置里进行页面切换动画设置：
image.png367533568.png

二、如果您已经设计好多个仪表板，方便起见，一种方式是可以采用外部扩展结合多页面功能来实现这个需求，另一种方式是可以采用外部扩展结合选项卡功能实现，下面分别介绍这两种方式：
1、外部扩展 + 多页面
这种方式的思想跟第一种类似，也需要在仪表板设计器添加多页。只不过其他页不需要再设计，只是拖入外部扩展组件，然后对其进行配置：
image.png296625060.png

对外部扩展进行地址配置，配置其他已设计好的仪表板地址：
image.png148523863.png

然后按照第一种方式开启多页切换就可以了
注：绿色toolbar去除可以在url之后添加toolbar=hide参数。
如：“http://localhost:51980/dashboards/view/0bead052-d56a-4fac-897b-a2984c0208e3?theme=default&lng=zh&toolbar=hide”

效果图：
多页仪表板.gif

2、外部扩展 + 选项卡
将选项卡拖到仪表板设计区，增加多个选项卡页面，然后将外部扩展插件拖入选项卡各个内容区域：
image.png420405272.png

对外部扩展进行配置，可以填入已设计好的仪表板地址：
image.png532191161.png

多个选项卡之间的切换可以开启自动播放：
image.png68793334.png

		自动登录	找回密码
密码			立即注册

[仪表板] 【仪表板-外观美化】多个仪表板切换的实现方案

0 个回复

微信认证勋章

讲师达人

元老葡萄

悬赏达人