Vaadin：标签以一种非常奇怪的方式显示 - 这是故意的吗？

Question

我真的对 Vaadin 的 Tabs/Tab-component 感到困惑：

我创建了一个包含几个标签的页面，基本上是这样的：

Tabs tabs = new Tabs();
Tab tab1 = new Tab("Label 1");
tab1.add(<some components (labels and entry fields) here>);
tabs.add(tab1);

Tab tab2 = new Tab("Label 2");
tab2.add(<some components (labels and entry fields) here>);
tabs.add(tab2);

Tab tab3 = new Tab("Label 3");
tab3.add(<some components (labels and entry fields) here>);
tabs.add(tab3);

mainPage.add(tabs)

我期望得到的渲染与此类似（当然以一些样式为模）：

 ___________  ___________  ___________
/  Label 1  \/ *Label 2* \/  Label 3  \
+----------------------------------------------------+
| Content of Tab 2 visible                           |
|                                                    |
| (the other tabs' contents is hidden until their    |
|  corresponding tab is selected )                   |
|                                                    |
|                                                    |
+----------------------------------------------------+

即我有一个标记单个选项卡或“页面”的标题列表，其中只有一个的内容显示在下面。在这里，例如假设当前选择了选项卡 2，因此在下面的区域中我可以看到它的内容，而选项卡 1 和选项卡 3 的内容当前是隐藏的。

现在，Vaadin 选项卡显示如下：

            [content 1]                 [content 2]             [content 3]  
   Label 1  [content 1]      *Label 2*  [content 2]    Label 3  [content 3]
            [content 1]                 [content 2]             [content 3]
            [content 1]                 [content 2]             [content 3]
                                     -----

即每个选项卡的内容显示在相应标签旁边，所有内容同时可见。该行表示当前选择的选项卡。

这是 Tab 概念的最奇怪的实现，在我看来完全被打破了！这真的是打算这样显示吗？还是我在这里做错了什么？

Answer 1

Tabs 组件仅用于显示选项卡本身，它不像在 Vaadin 8 及更早版本中的 TabSheet 那样控制内容。据我所知，TabSheet 组件在积压中。

与此同时，您可以构建自己的类似于此（来自https://cookbook.vaadin.com/tabsheet）

package com.vaadin.recipes.recipe.tabsheet;

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.router.Route;
import com.vaadin.recipes.recipe.Metadata;
import com.vaadin.recipes.recipe.Recipe;
import java.util.LinkedHashMap;
import java.util.Map;

@Route("tabsheet")
@Metadata(
    howdoI = "create a TabSheet component",
    description = "Learn how to change content based on the selected tab in a Vaadin Java app."
)
public class TabSheetView extends Div {
    /**
     * Contents of the TabSheet.
     */
    private final Map<Tab, Component> contents = new LinkedHashMap<>();

    public TabSheetView() {
        this.buildContentAndTabs();

        // tabs component
        final Tabs tabs = new Tabs();

        // display area
        final Div display = new Div();
        display.setSizeFull();

        // show components on the screen
        this.add(tabs, display);

        // update display area whenever tab selection changes
        tabs.addSelectedChangeListener(
            event -> {
                // remove old contents, if there was a previously selected tab
                if (event.getPreviousTab() != null) display.remove(this.contents.get(event.getPreviousTab()));
                // add new contents, if there is a currently selected tab
                if (event.getSelectedTab() != null) display.add(this.contents.get(event.getSelectedTab()));
            }
        );

        // add tabs to the component
        tabs.add(this.contents.keySet().toArray(new Tab[0]));
    }

    /**
     * Builds contents to be displayed and the corresponding tabs. Uses the first
     * articles from <a href=
     * "https://www.un.org/en/universal-declaration-human-rights/index.html">the
     * Universal Declaration of Human Rights</a>.
     */
    private void buildContentAndTabs() {
        final String[] data = new String[] {
            "Article 1.",
            "All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.",
            "Article 2.",
            "Everyone is entitled to all the rights and freedoms set forth in this Declaration, without distinction of any kind, such as race, colour, sex, language, religion, political or other opinion, national or social origin, property, birth or other status. Furthermore, no distinction shall be made on the basis of the political, jurisdictional or international status of the country or territory to which a person belongs, whether it be independent, trust, non-self-governing or under any other limitation of sovereignty.",
            "Article 3.",
            "Everyone has the right to life, liberty and security of person.",
            "Article 4.",
            "No one shall be held in slavery or servitude; slavery and the slave trade shall be prohibited in all their forms.",
            "Article 5.",
            "No one shall be subjected to torture or to cruel, inhuman or degrading treatment or punishment.",
            "Article 6.",
            "Everyone has the right to recognition everywhere as a person before the law.",
        };
        // create tabs and matching contents
        for (int zmp1 = 0; zmp1 < data.length; zmp1 += 2) this.contents.put(
                new Tab(data[zmp1]),
                new Span(data[zmp1 + 1])
            );
    }
}