我有这个简单的布局:
@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);
}
}
顶部是页眉,底部是页脚。
我想添加此 View :
@Route(layout = MainView.class, value = "secured/ue")
public class UEView extends Article {
// many stuff
}
当我单击链接时(或当我使用路由“secured/ue”时),将显示此 View :
问题在于 UE View 显示在“页脚”之后。
我尝试使用CSS来解决这个问题,但它不起作用:
main{
display: grid;
grid-template-areas:
"header"
"article"
"footer";
}
我怎样才能做到这一点?显示页眉和页脚之间的 View ??
最佳答案
您需要在主视图中为您的文章提供一个占位符,例如就像下面的 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());
}
}
关于css - Vaadin:在页眉和页脚之间显示 RouterLink View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55133361/