Как создать Вертикальное меню в Ваадине? - PullRequest
Новая
       86

Как создать Вертикальное меню в Ваадине?

1 голос
/ 04 августа 2020

Я хочу создать вертикальное меню Vaadin. В настоящее время мое меню находится в горизонтальном виде, например:

введите описание изображения здесь

Для этого представления у меня есть код в MainLayout. java class: 

@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;
    }
}

Пожалуйста, помогите мне. как преобразовать горизонтальный вид пунктов меню в вертикальный?

Ответы [ 2 ]

4 голосов
/ 04 августа 2020

Вы можете создать вертикальную панель вкладок: 

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

1 голос
/ 04 августа 2020

Вы можете добавить свой 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);
...