如何解决Vaadin:标签以一种非常奇怪的方式显示 - 这是故意的吗?
我真的对 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 的内容。
[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
组件在 backlog 中。
与此同时,您可以构建自己的类似(来自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])
);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。