vaadin - 基本布局 - 选择 Tab 后更改内容

如何解决vaadin - 基本布局 - 选择 Tab 后更改内容

我正在查看 Vaadin 的基本应用布局示例

https://labs.vaadin.com/layout-examples/app-layout-basic

我正在尝试了解撰写内容的最佳方式。我注意到如果我使用左侧导航从“主页”切换到“关于”页面的内容不会改变。

当我查看源代码时，内容似乎是静态的 - 没有说明如何根据导航栏中选定的 Tabs 更改内容。

有人可以举例说明在实践中这应该是怎样的吗？

解决方法

这里有一些方法：

标签更改监听器

您可以使用 tabs.addSelectedChangeListener 添加一个被选中的标签的监听器，然后根据它更改内容。

通常，您会创建一个地图 Map<Tab,Component>，它定义要为每个选项卡显示的内容。当侦听器被触发时，您从地图中检索该选项卡的组件，并将其添加到布局的某个部分，首先删除之前的组件。

Example in the Vaadin Cookbook.

带有路线/链接的标签

您可以在选项卡内放置链接。这可以是 RouterLink（允许在不重新加载页面的情况下进行导航）或 Anchor。

您将这些放在主布局中，每个选项卡都包含指向您的视图之一的路线。例如，假设我们有一个 MyView 类：

@Route(layout = MainLayout.class)
public class MyView extends VerticalLayout {
    ...
}

还有一个 MainLayout 保存导航：

public class MainLayout extends HorizontalLayout implements RouterLayout {
    public MainLayout() {
        Tab tab1 = new Tab(new RouterLink("Go to MyView",MyView.class));
        myTabs.add(tab1);
    }
}

Example in the Vaadin Cookbook.

路线/链接

如果您不想使用标签，只需使用 RouterLink 或 Anchor。使用 RouterLink，您可以传递单击时要导航到的视图的类。

RouterLink 还具有 setHighlightCondition 选项，用于设置在何种条件下突出显示链接。例如，只要用户导航到与链接匹配的位置，setHighlightCondition(HighlightConditions.sameLocation()) 就会突出显示该链接。

使用 setHighlightAction 选择链接的突出显示方式。默认情况下，它会向链接添加一个 highlight 属性，该属性可用于对其进行样式设置。