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

Question

我想创建 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;
    }
}

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

Answer 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