代码之家 › 专栏 › 技术社区 › Tyvain

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

vaadin-flow vaadin10 vaadin css

0

Tyvain · 技术社区 · 6 年前

我有一个简单的布局:

@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);
    }
}

顶部是页眉,底部是页脚。

我想添加以下视图:

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

单击链接(或使用路由“安全/ue”)时显示此视图:

问题是UE视图显示在“页脚”之后。

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

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

0 回复 | 直到 6 年前

1

3

Tatu Lund 6 年前

您需要在主视图中为您的文章设置一个占位符,例如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());
    }

}