Vaadin：在页眉和页脚之间显示 RouterLink 视图

Question

我有这个简单的布局：

@StyleSheet("frontend://styles.css")
@Route("")
public class MainView extends Main implements RouterLayout {
    private static final long serialVersionUID = 1L;
    public MainView(@Value("${env}") String env, @Autowired BuildProperties buildProperties) {
        HeaderComponent header = new HeaderComponent(env, Application.APP_NAME, buildProperties.getVersion());
        FooterComponent footer = new FooterComponent(env, buildProperties.getVersion())
        add(header, footer);
    }
}

顶部一个页眉，底部一个页脚。

Between 我要添加这个视图：

@Route(layout = MainView.class, value = "secured/ue")
public class UEView extends Article {
// many stuff
}

当我点击 link（或当我使用路由 'secured/ue'）时显示此视图：

问题是UE视图显示在'footer'之后。

我尝试使用 css 来解决这个问题，但它不起作用：

main{
display: grid;
grid-template-areas:
"header"
"article"
"footer";
}

我该怎么做？显示页眉和页脚之间的视图 ??

Answer 1

您的文章需要在主视图中占位符，例如就像 Div contentArea 下面一样。除此之外，您还需要覆盖 showRouterLayoutContent(..) 方法。

@Route("")
public class MainView extends Main implements RouterLayout {
    private Div contentArea = new Div();

    public MainView(@Value("${env}") String env, @Autowired BuildProperties buildProperties) {
        HeaderComponent header = new HeaderComponent(env, Application.APP_NAME, buildProperties.getVersion());
        FooterComponent footer = new FooterComponent(env, buildProperties.getVersion())
        add(header, contentArea, footer);
    }

    @Override
    public void showRouterLayoutContent(HasElement content) {
       contentArea.getElement().appendChild(content.getElement());
    }

}

Vaadin：在页眉和页脚之间显示 RouterLink 视图

Vaadin: display RouterLink view between header and footer

css

vaadin

vaadin10

vaadin-flow