如何在 Vaadin 中创建垂直菜单？答案

【问题标题】：How to create Vertical menu in Vaadin?如何在 Vaadin 中创建垂直菜单？
【发布时间】：2020-08-04 06:30:57
【问题描述】：

我想创建 Vaadin 垂直菜单。目前我的菜单是这样的水平视图：

对于该视图，我在 MainLayout.java 类中有代码：

@Theme(value = Lumo.class)
@Route("")
@PWA(name = "Project Base for Vaadin", shortName = "Project Base", enableInstallPrompt = false)
@CssImport("./styles/shared-styles.css")
@CssImport(value = "./styles/menu-buttons.css", themeFor = "vaadin-button")
public class MainLayout extends AppLayout implements RouterLayout {

    public MainLayout() {
        final DrawerToggle drawerToggle = new DrawerToggle();
        drawerToggle.addClassName("menu-toggle");
        addToNavbar(drawerToggle);

        final VerticalLayout top = new VerticalLayout();
        //top.setDefaultVerticalComponentAlignment(Alignment.CENTER);

//        top.setClassName("menu-header");


        final Label title = new Label("Converted Application");
        top.add(title);
        addToNavbar(top);

        top.add(title);
        addToNavbar(top);

        // Navigation items
        addToDrawer(createMenuLink(HomeView.class, HomeView.VIEW_NAME,
                VaadinIcon.EDIT.create()));

        addToDrawer(createMenuLink(MainView.class, MainView.VIEW_NAME,
                VaadinIcon.INFO_CIRCLE.create()));

        addToDrawer(createMenuLink(ConvertedLoginPage.class, ConvertedLoginPage.VIEW_NAME,
                VaadinIcon.LOCK.create()));

        addToDrawer(createMenuLink(Table.class, Table.VIEW_NAME,
                VaadinIcon.LOCK.create()));
    }

    private RouterLink createMenuLink(Class<? extends Component> viewClass, String caption, Icon icon) {
        final RouterLink routerLink = new RouterLink(null, viewClass);
        routerLink.add(icon);
        routerLink.add(new Span(caption));
        icon.setSize("24px");
        return routerLink;
    }
}

请帮助我。如何将菜单项的水平视图转换为垂直视图？

【问题讨论】：

标签： java vaadin

【解决方案1】：

您可以创建一个垂直标签栏：

Tabs tabs = new Tabs();
tabs.setOrientation(Tabs.Orientation.VERTICAL);

请在此处找到我的完整示例：

https://github.com/72services/jtaf4/blob/develop/src/main/java/ch/jtaf/ui/layout/MainLayout.java

【讨论】：

此外，通过从start.vaadin.com 下载应用程序，您将获得此样式和其他样式，从而获得开箱即用的漂亮菜单。
让我试试看。谢谢。

【解决方案2】：

您可以将您的 RouterLinks 添加到 VerticalLayout 并将其添加到抽屉中。

 // Navigation items
VerticalLayout routerLinks = new VerticalLayout();

routerLinks.add(createMenuLink(HomeView.class, HomeView.VIEW_NAME, VaadinIcon.EDIT.create()));
routerLinks.add(createMenuLink(MainView.class, MainView.VIEW_NAME, VaadinIcon.INFO_CIRCLE.create()));
routerLinks.add(createMenuLink(ConvertedLoginPage.class, ConvertedLoginPage.VIEW_NAME, VaadinIcon.LOCK.create()));
routerLinks.add(createMenuLink(Table.class, Table.VIEW_NAME, VaadinIcon.LOCK.create()));

addToDrawer(routerLinks);

【讨论】：