Spring Boot 使用Vaadin框架添加页脚

hi3rlvi2  于 2023-06-22  发布在  Spring
关注(0)|答案(2)|浏览(134)

我想使用vaadin框架添加页脚,但我不想为所有页面添加页脚。有了页眉,一切都很容易设置,但我没有找到任何关于如何在所有页面上添加页脚的最新文档。

public class MainLayout extends AppLayout {

    public MainLayout() {
        addHeader();
        addFooter();
    }

    private void addHeader() {
        Text text = new Text("This is a header");

        HorizontalLayout header = new HorizontalLayout(text);
        header.setWidth("100%");
        header.setDefaultVerticalComponentAlignment(FlexComponent.Alignment.CENTER);

        addToNavbar(header);
    }

    private void addFooter() {
        Text text = new Text("This is a footer");

        HorizontalLayout footer = new HorizontalLayout(text);
        footer.setWidth("100%");
        footer.setDefaultVerticalComponentAlignment(FlexComponent.Alignment.CENTER);
        
        // Missing method to add footer like for header
    }
    
}

我还尝试将其实现为MainLayout的扩展,但仍然不显示页脚

@ParentLayout(MainLayout.class)
public class FooterLayout extends VerticalLayout implements RouterLayout {

    private final Div container = new Div();

    public FooterLayout() {
        Div footer = new Div();
        add(container, footer);
        footer.add(new Text("I'm a fixed footer!"));
        add(footer);
    }

    public void showRouterLayoutContent(HasElement content) {
        container.removeAll();
        container.getElement().setChild(0, content.getElement());
    }
}

我的问题有什么解决办法吗?主要思想是页眉和页脚应该在每个使用MainLayout的页面上

cwdobuhd

cwdobuhd1#

页脚不是AppLayout中的功能。你有两个选择
1.不要使用AppLayout,而是通过组合布局组件来创建自己的自定义布局,以实现所需的结果。即实现RouterLayout接口和showRouterLayoutContent方法。这种方法将允许你做任何你想做的事情。
1.您还可以执行上述操作,以便在组合中将AppLayout用作构建块,而不是对其进行扩展。
标签:Vaadin 14: Adding Footer application-wide to AppLayout

46scxncf

46scxncf2#

我也有同样的问题。你可以试试这个:

public class CustomLayout extends VerticalLayout implements AfterNavigationObserver, RouterLayout {
AppLayout navigation;
Div container = new Div();
Div footer = new Div();

public CustomLayout(AuthenticatedUser authenticatedUser, AccessAnnotationChecker accessChecker) {
    setSpacing(false);
    navigation = new Navigation(authenticatedUser, accessChecker);

    container.setSizeFull();

    add(navigation, container, footer);
    footer.add(new Text("I'm a fixed footer!"));
}

public void showRouterLayoutContent(HasElement content) {
    container.removeAll();
    container.getElement().setChild(0, content.getElement());
}

@Override
public void afterNavigation(AfterNavigationEvent event) {
    getElement().scrollIntoView();
}

}
然后在视图中添加以下内容:

@Route(value = "your-route-path", layout = CustomLayout.class)

相关问题