1

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

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

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

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

4

2 回答 2

3

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

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

或更详细：

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

于 2018-08-15T09:01:21.197 回答
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 = "",...)

于 2018-11-21T04:45:01.510 回答