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 组件仅用于显示选项卡本身，它不像 TabSheet 在 Vaadin 8 和更早版本中那样控制内容。据我所知，有一个 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])
            );
    }
}

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

Vaadin: Tabs are displayed in a really bizarre way - is this intended?

vaadin

vaadin-flow