首頁猿問如何在Vaadin14中為Tabs...

如何在Vaadin14中為Tabs設置不同的內容？

Java

慕田峪7331174 2023-06-21 16:14:57

我有一個非常簡單的類，基本上只是AppLayout一些Tab.現在是我的問題。我無法找到一種聰明的方法來顯示類的不同內容Tabs。是否有任何接口或可以調用的東西來區分的內容Tab？class MainAppView extends AppLayout {public MainAppView(){ createDrawerAndAddToAppView();}void createDrawerAndAddToAppView(){ Tabs tabs = createTabsForDrawer(); tabs.setOrientation(Tabs.Orientation.VERTICAL); addToDrawer(tabs); H1 a = new H1("Test"); // Is displayed as content for every Tab tabs.addSelectedChangeListener(selectedChangeEvent -> /** * How to get the specific content of a Tab here? */ //selectedChangeEvent.getSelectedTab(). //getContent() and put in super.setContent()? super.setContent(a)); // Displays 'Test' as content for every Tab // The Listener shall display the specific content of the getSelectedTab()}private Tabs createTabsForDrawer(){ return new Tabs( new Tab("Home"), new Tab("Dummy"), new Tab("Test"));}}

查看完整描述

1 回答

慕田峪9158850

TA貢獻1794條經驗獲得超7個贊

這是一個示例，使用地圖來跟蹤哪些內容屬于哪個選項卡。實際上，您的選項卡內容會更復雜，并且可能是用它自己的方法創建的。

@Route

public class TabTest extends VerticalLayout {

private Map<Tab, Component> tabComponentMap = new LinkedHashMap<>();

public TabTest() {

Tabs tabs = createTabs();

Div contentContainer = new Div();

add(tabs, contentContainer);

tabs.addSelectedChangeListener(e -> {

contentContainer.removeAll();

contentContainer.add(tabComponentMap.get(e.getSelectedTab()));

});

// Set initial content

contentContainer.add(tabComponentMap.get(tabs.getSelectedTab()));

}

private Tabs createTabs() {

tabComponentMap.put(new Tab("Show some text"), new H1("This is the text tab"));

tabComponentMap.put(new Tab("Show a Combo Box"), new ComboBox<String>());

tabComponentMap.put(new Tab("Show a button"), new Button("Click me and nothing happens"));

return new Tabs(tabComponentMap.keySet().toArray(new Tab[]{}));

}

你也可以對路由做類似的事情，但是你可能希望你的包含組件是一個RouterLayout. 如果您想在從其他地方導航后自動選擇正確的選項卡，這也需要更多的邏輯。

@Route

public class TabTest extends VerticalLayout implements RouterLayout {

private Map<Tab, String> tabToUrlMap = new LinkedHashMap<>();

private Div contentContainer = new Div();

public TabTest() {

Tabs tabs = createTabs();

Div contentContainer = new Div();

contentContainer.setSizeFull();

add(tabs, contentContainer);

tabs.addSelectedChangeListener(e ->

UI.getCurrent().navigate(tabToUrlMap.get(e.getSelectedTab())));

}

private Tabs createTabs() {

RouteConfiguration routeConfiguration = RouteConfiguration.forApplicationScope();

tabToUrlMap.put(new Tab("View 1"), routeConfiguration.getUrl(TestView1.class));

tabToUrlMap.put(new Tab("View 2"), routeConfiguration.getUrl(TestView2.class));

tabToUrlMap.put(new Tab("View 3"), routeConfiguration.getUrl(TestView3.class));

return new Tabs(tabToUrlMap.keySet().toArray(new Tab[]{}));

}

@Override

public void showRouterLayoutContent(HasElement content) {

getElement().appendChild(content.getElement());

}

和一個示例視圖

@Route(layout = TabTest.class)

public class TestView3 extends VerticalLayout {

public TestView3() {

add("View 3");

}

反對回復 2023-06-21

1 回答
0 關注
175 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在Vaadin14中為Tabs設置不同的內容？

如何在Vaadin14中為Tabs設置不同的內容？

1 回答

添加回答

如何在Vaadin14中為Tabs設置不同的內容？

如何在Vaadin14中為Tabs設置不同的內容？