我很高兴使用标准的vaadin applayout组件作为我的应用程序的布局起点。现在我收到了添加状态栏的要求。状态栏的宽度必须与导航栏的宽度相同,因此它不能是“内容”的一部分。对于默认的applayout,这是可能的吗?
qeeaahzv1#
最初,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);
add(appLayout, statusBar);
add(statusBar, appLayout);
1条答案
按热度按时间qeeaahzv1#
最初,applayout的目的是占据整个空间,因此它实际上并不适用于这个用例。然而,我能够调整它的行为来适应这些设置的页脚栏。
如果你想让状态栏位于顶部,只需切换
add(appLayout, statusBar);
到add(statusBar, appLayout);