如何在vaadin 10中左侧创建垂直菜单栏，右侧显示内容

Question

对于Vaadin 10，有没有办法做到这一点？或者，vaadin-10只支持顶级菜单？我对这个话题很好奇。

当我在树状结构(如MainView -> MenuBar -> MenuItemPage)中拥有父布局时(例如main view -> menubar -> homepage(route=“主页”))

它总是在菜单下面显示内容。不是在菜单的边上。我的MainView是水平布局。我想要做的是，当有人加载www.mydomain.com/ home时，它应该加载菜单栏旁边的主页。不在菜单栏下面。

有没有办法做到这一点，或者我正在尝试一些不可能的事情？

Answer 1

菜单模板的组成没有限制，Vaadin 10或11平台还没有这样的模板，但已经有一个插件可以做到这一点。

https://vaadin.com/directory/component/app-layout-addon

或者更详细的描述：

https://vaadin.com/directory/component/hybridmenu

Answer 2

我发现这个更好：https://vaadin.com/directory/component/app-layout-add-on

它与Vaadin11(也包括V10和V8)兼容，更重要的是，它与Vaadin Router API兼容。

<dependency>
   <groupId>com.github.appreciated</groupId>
   <artifactId>app-layout-addon</artifactId>
   <version>2.0.0</version>
</dependency>

以下是Vaadin11(和10)的代码示例：https://github.com/appreciated/vaadin-app-layout/tree/master/app-layout-examples/app-layout-plain-example

从在主布局上扩展AppLayoutRouterLayout开始(我也从我的主布局中删除了默认路由，但取决于您)，然后继续上面的简单示例。

以下是基于上述示例的示例代码；

    import com.github.appreciated.app.layout.behaviour.Behaviour;
    import com.github.appreciated.app.layout.builder.AppLayoutBuilder;
    import com.github.appreciated.app.layout.component.appbar.AppBarBuilder;
    import com.github.appreciated.app.layout.component.appmenu.MenuHeaderComponent;
    import com.github.appreciated.app.layout.component.appmenu.left.LeftClickableComponent;
    import com.github.appreciated.app.layout.component.appmenu.left.LeftNavigationComponent;
    import com.github.appreciated.app.layout.component.appmenu.left.builder.LeftAppMenuBuilder;
    import com.github.appreciated.app.layout.design.AppLayoutDesign;
    import com.github.appreciated.app.layout.notification.DefaultNotificationHolder;
    import com.github.appreciated.app.layout.notification.component.AppBarNotificationButton;
    import com.github.appreciated.app.layout.router.AppLayoutRouterLayout;
    import com.vaadin.flow.component.icon.VaadinIcon;

    import static com.github.appreciated.app.layout.entity.Section.HEADER;

    public class MainLayout
            extends AppLayoutRouterLayout {//https://vaadin.com/directory/component/app-layout-add-on
        private static DefaultNotificationHolder notifications = new DefaultNotificationHolder(newStatus -> {
        });

        @Override
        public com.github.appreciated.app.layout.behaviour.AppLayout getAppLayout() {
            return AppLayoutBuilder
                    .get(Behaviour.LEFT_HYBRID_SMALL)// There some other behaviours too
                    .withTitle("Header")
                    .withAppBar(AppBarBuilder
                            .get()
                            .add(new AppBarNotificationButton(VaadinIcon.BELL, notifications))
                            .build())
                    .withDesign(AppLayoutDesign.MATERIAL)
                    .withAppMenu(LeftAppMenuBuilder
                            .get()
                            .addToSection(new MenuHeaderComponent("Menu-Header",
                                    "Version 2.0.1",
                                    null
                            ), HEADER)
                            .addToSection(new LeftClickableComponent("Set Behaviour HEADER",
                                    VaadinIcon.COG.create(),
                                    clickEvent -> openModeSelector()
                            ), HEADER)
                            .add(new LeftNavigationComponent("Home", VaadinIcon.HOME.create(), View1.class))
                            .build())
                    .build();

        }
        
        private void openModeSelector() {
            // the code to open a dialog
        }

    }

其中View1类只是一个简单的布局；

    @Route(value = "", layout = MainLayout.class)
    public class View1 extends VerticalLayout {

        public View1() {
            Paragraph label = new Paragraph("Hi!");
            label.setWidth("100%");
            add(label);
        }
    }

另外，确保默认有一个视图(@Route(value = ""，...) )