时间戳

首页 > 解决方案 > 带有状态栏的 Vaadin 14,6 AppLayout？

java - 带有状态栏的 Vaadin 14,6 AppLayout？

问题描述

我很高兴使用标准Vaadin AppLayout 组件作为我的应用程序的布局起点。现在我收到了添加状态栏的要求。状态栏的宽度必须与导航栏的宽度相同，因此它不能成为“内容”的一部分。

使用默认的 AppLayout 是否有可能？

标签： javalayoutstatusbarvaadin14

解决方案

最初 AppLayout 旨在接管整个空间，因此它并不真正适用于这个用例。但是，我可以通过这些设置对其进行调整以使其适合页脚栏。

public class MainLayout extends VerticalLayout implements RouterLayout {
    private AppLayout appLayout = new AppLayout();
    private FlexLayout childWrapper = new FlexLayout();

    public MainLayout() {
        ... setup appLayout ...
        childWrapper.setSizeFull();
        appLayout.setContent(childWrapper);

        HorizontalLayout statusBar = new HorizontalLayout();
        statusBar.setHeight("50px");
        statusBar.setWidth("100%");
        statusBar.add(new Span("Status Bar"));
        statusBar.getElement().getStyle().set("background",
                "var(--lumo-tint-30pct)");
        appLayout.getElement().getStyle().set("width", "100%");
        appLayout.getElement().getStyle().set("height", "500px");
        add(appLayout, statusBar);
        this.expand(appLayout);
    }

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

}

如果您对状态栏感兴趣，请切换add(appLayout, statusBar);到add(statusBar, appLayout);

推荐阅读