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

【问题标题】：How to create a vertical menu bar in the left side and content is displayed in the right side in vaadin 10vaadin 10中如何在左侧创建垂直菜单栏并在右侧显示内容
【发布时间】：2019-01-22 02:20:28
【问题描述】：

使用 Vaadin 10 有没有办法实现这一点？或者 vaadin-10 只支持顶级菜单？我对这个话题很好奇。

当我在这样的树中有父布局时 MainView -> MenuBar -> MenuItemPage（例如主视图 -> 菜单栏 -> homepage(route="home")）

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

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

【问题讨论】：

请添加代码，这对您的问题没有按预期工作。

标签： vaadin vaadin10

【解决方案1】：

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

它与 Vaadin 11（以及 V10 和 V8）兼容，更重要的是，它基于与 Vaadin Router API 的兼容。

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

这是 Vaadin 11（和 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 = "",...)

【讨论】：

【解决方案2】：

没有限制如何编写菜单模板，在 Vaadin 10 或 11 平台中还没有内置这样的模板，但是已经有一个插件可以做到这一点。

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

或更详细：

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

【讨论】：