我真的很困惑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 ) |
| |
| |
+----------------------------------------------------+
即，我有一个标题列表，标记各个选项卡或"；页面"；，其中只有一个在下面显示其内容。这里，例如，假设选项卡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概念最奇怪的实现，在我看来完全崩溃了！这真的是要这样显示吗？还是我在这里做错了什么？
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])
);
}
}