Vaadin 14,6 AppLayout 与状态栏？

如何解决Vaadin 14,6 AppLayout 与状态栏？

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

这在默认的 AppLayout 中完全可行吗？

解决方法

最初 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);