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

Question

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

默认的 AppLayout 完全可以做到这一点吗？

Answer 1

最初 AppLayout 的目的是接管整个 space，因此它并不是真正用于此用例。但是，我能够通过这些设置调整它以适应页脚栏。

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

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

Vaadin 14,6 AppLayout with StatusBar?

java

layout

statusbar

vaadin14