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

Question

我真的很困惑 Vaadin 的 Tabs/Tab 组件:
我创建了一个包含几个选项卡的页面，本质上是这样的:

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 )                   |
|                                                    |
|                                                    |
+----------------------------------------------------+

IE。我有一个标记单个选项卡或“页面”的标题列表，其中只有一个在下面显示其内容。在这里，例如假设当前选择了选项卡 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]
                                     -----

IE。每个选项卡的内容显示在相应标签旁边，并且所有内容同时可见。该行指示当前选定的选项卡。
这是 Tab 概念最奇怪的实现，在我看来完全被破坏了!真的要这样显示吗？或者我在这里做错了什么？

Answer 1

Tabs组件仅用于显示选项卡本身，它不控制像 TabSheet 这样的内容在 Vaadin 8 及更早版本中做到了。 A 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])
            );
    }
}