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

Question

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

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

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

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

有人可以举例说明这在实践中应该如何形成圆锥形吗？

Answer 1

这里有一些方法：

标签更改侦听器

您可以添加一个使用 tabs.addSelectedChangeListener 选择选项卡的侦听器，然后根据它更改内容。

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

Example in the Vaadin Cookbook.

带有 routes/links

的标签

您可以将 link 放在选项卡内。这可以是 RouterLink，允许在不重新加载页面的情况下导航，也可以是 Anchor.

你把它们放在你的主布局中，每个选项卡都包含到你的一个视图的路径。例如，假设我们有一个 MyView class:

@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.

Routes/links

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

RouterLink还有setHighlightCondition的选项，设置在什么条件下link应该高亮显示。例如，只要用户导航到与 link.

匹配的位置，setHighlightCondition(HighlightConditions.sameLocation()) 就会突出显示 link

使用 setHighlightAction 选择 link 的突出显示方式。默认情况下，它将添加一个 highlight 属性到 link，可用于设置样式。