Vaadin：使用 Tab 组件在视图之间进行适当的导航

Question

我已经使用 Vaadin 创建了一个导航菜单栏，我想知道如何将视图或 link 附加到每个选项卡，以便单击它可以将我重定向到相应的视图。我设法找到了解决方法，但我认为这种方法有缺陷：

Tabs tabs = new Tabs(new Tab("Login"), new Tab("Register"));
        tabs.setOrientation(Tabs.Orientation.VERTICAL);
        tabs.addSelectedChangeListener(event -> {
            if (event.getSelectedTab().getLabel().equalsIgnoreCase("Login")) {
                UI.getCurrent().navigate(LoginView.class);
            } else if (event.getSelectedTab().getLabel().equalsIgnoreCase("Register")) {
                UI.getCurrent().navigate(RegisterView.class);
            }
        });

我没有在 Tab 组件上找到单独的 clickListener 事件，这对我来说很奇怪。还注意到我可以使用 tabName.getUI() 方法将 UI 附加到选项卡，但是我找不到附加它的方法。

帮我找到正确的标签导航方式！提前致谢！

Answer 1

在 Vaadin 14 中，您可以将组件添加到选项卡。因此，除了 new Tab("Login") 之外，您还可以执行以下操作：

private Tab createMenuItem(String title, VaadinIcon icon, Class<? extends Component> target) {
    RouterLink link = new RouterLink(null,target);
    if (icon != null) link.add(icon.create());
    link.add(title);
    Tab tab = new Tab();
    tab.add(link);
    return tab;
}

当然RouterLink不是唯一的选择，如果你喜欢你也可以使用Button并使用按钮的点击监听器来调用导航等。这里有很多选择。

Answer 2

如果您只想 show/hide 不同的标签页而不需要实际导航，您可以在 tabs with pages example 中查看它是如何完成的。

如果您想导航（您的设置似乎就是这种情况），那么 addSelectedChangeListener 是正确的方法 - 如果您不想使用 RouterLink 或 Button 正如塔图斯的回答所暗示的那样。就个人而言，我认为 Tab 组件中的 RouterLinks 和 Buttons 看起来不太好，因此更喜欢这种方式。

为了避免必须比较该侦听器中的硬编码字符串，您可以使用类似于上面 link 中的做法的 Map<Tab, Class>，然后导航到为以下内容定义的 class那个标签。

Tab loginTab = new Tab("Login");
Tab registerTab = new Tab("Register");

Map<Tab, Class> tabsMap = new HashMap<>();
tabsMap.put(loginTab, LoginView.class);
tabsMap.put(registerTab, RegisterView.class);

Tabs tabs = new Tabs(loginTab, registerTab);
tabs.setOrientation(Orientation.VERTICAL);
tabs.addSelectedChangeListener(event -> {
    UI.getCurrent().navigate(tabsMap.get(event.getSelectedTab()));
});

编辑： 现在测试后，我必须说在 Tab 组件中使用 RouterLink 看起来一点也不差（我在想 Buttons，它看起来很糟糕）。因此，如果您使用导航然后使用 Tatu 的答案，如果您想在没有导航的情况下执行 showing/hiding 组件，请制作 Map<Tab, Component> 并显示映射到所选选项卡的组件（同时隐藏所有其他映射的组件到其他标签）

Answer 3

paged-tabs add-on

看起来像 Alejandro Duarte has made a Vaadin 14 add-on, named paged-tabs, for us to plug into our Vaadin projects. I imagine this is a wrapper around the kind of code shown in the correct Answer by Kaspar Scherrer。

这 add-on 简化了制表符的处理。您只需传递组件（小部件、布局）和标题。

PagedTabs tabs = new PagedTabs() ;
tabs.add( component , "Tab caption 1" ) ;
tabs.add( component2 , "Tab caption 2" ) ;

或者，您可以传递 Tab object。

Tab tab = new Tab();
tab.add( new Span( "Tab caption" ) , new Button( "Click me" ) ) ;

PagedTabs tabs = new PagedTabs() ;
tabs.add( new Span( "Tab content" ) , tab ) ;

该库还提供“可关闭”功能，显示 X 供用户单击以删除该选项卡。

Vaadin：使用 Tab 组件在视图之间进行适当的导航

Vaadin: Propper navigation between views with Tab component

java

vaadin

paged-tabs add-on