如何在Vaadin Flow中隐藏vaadin-connection-indicator

有几种可行的方法可以隐藏这个连接状态指示器：

方法1：通过CSS全局隐藏 #

在你的主题样式文件（比如frontend/styles.css或主题文件夹下的css文件）中添加以下样式，强制隐藏组件：

vaadin-connection-indicator {
  display: none !important;
}

这种方式简单直接，无需修改后端代码。

方法2：通过配置禁用组件 #

如果使用Spring Boot，可在application.properties中添加配置项，从根源上阻止组件渲染：

vaadin.connection-indicator.enabled=false

非Spring Boot项目则在vaadin.properties文件中添加同样配置即可。

方法3：Java代码控制隐藏（不推荐） #

如果需要在特定逻辑下动态控制显示状态，可在UI初始化时获取组件并设置隐藏：

@Route
public class YourMainView extends VerticalLayout {
    public YourMainView() {
        UI.getCurrent().getElement().getChildren()
                .filter(child -> "vaadin-connection-indicator".equals(child.getTag()))
                .findFirst()
                .ifPresent(child -> child.setVisible(false));
    }
}

这种方式相对繁琐，仅适合需动态切换的场景，一般优先推荐前两种方法。

内容的提问来源于stack exchange，提问作者Giuseppe Di Luca