在Vaadin 14中,您可以使用Tab
组件来创建选项卡,并使用VerticalLayout
或其他布局组件来设置每个选项卡的内容
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
// 创建选项卡
Tab tab1 = new Tab("Tab 1");
Tab tab2 = new Tab("Tab 2");
// 创建选项卡内容布局
VerticalLayout content1 = new VerticalLayout();
content1.add("Content for Tab 1");
VerticalLayout content2 = new VerticalLayout();
content2.add("Content for Tab 2");
Tabs
组件中,并将内容布局添加到相应的选项卡中:// 创建一个Tabs组件
Tabs tabs = new Tabs(tab1, tab2);
// 将内容布局添加到相应的选项卡中
tab1.setContent(content1);
tab2.setContent(content2);
Tabs
组件添加到视图的根布局中:// 假设您的视图继承自VerticalLayout
public class MyView extends VerticalLayout {
public MyView() {
add(tabs);
}
}
现在,当您运行应用程序时,您应该能够看到两个选项卡,每个选项卡都有其自己的内容。
领取专属 10元无门槛券
手把手带您无忧上云