英文:
How to create Vertical menu in Vaadin?
问题
我想创建一个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;
}
}
请帮助我，如何将菜单项的水平视图转换为垂直视图？
英文:
I want to create Vaadin vertical menu. Currently my menu is in horizontal view like this:
For that view I have code in 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;
}
}
Please help me. how can I convert horizontal view of menu items into vertical view?
答案1
得分: 5
你可以创建一个垂直标签栏：
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
英文:
You could create a vertical tab bar:
Tabs tabs = new Tabs();
tabs.setOrientation(Tabs.Orientation.VERTICAL);
Please find my full example here:
https://github.com/72services/jtaf4/blob/develop/src/main/java/ch/jtaf/ui/layout/MainLayout.java
答案2
得分: 3
你可以将你的RouterLinks添加到一个VerticalLayout中，然后将它添加到抽屉中。
// 导航项目
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);
英文:
You could add your RouterLinks into a VerticalLayout and add that into the drawer.
// 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);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论