Question

使用Vaadin 10可以实现这一目标吗？否则，vaadin-10仅支持顶级菜单？我对这个话题很好奇。

当我在像这样的树中有一个父布局时，MainView-> MenuBar-> MenuItemPage（例如主视图->菜单栏->主页（route =“ home”））

它始终在菜单下方显示内容。不在菜单的侧面。我的MainView是水平布局。我想要做的是，当有人加载wwww.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

它与Vaadin 11（以及V10和V8）兼容，更重要的是，它与Vaddin Routing 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 =“”，...）

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

2 个答案: