使用Vaadin隱藏和摺疊菜單

Question

是否有人知道如何使用vaadin api創建隱藏和摺疊內容。

Answer 1

我通過使用vaadin.I的TabSheet功能實現了它。每當用戶點擊' - '選項卡時，我創建了兩個選項卡'+'和' - '它將TabSheet高度設置爲100％，並且每當用戶單擊' +'Tab我將TabSheet的高度設置爲20％（標籤頁的可見高度），因此無論TabSheet中的哪些內容將隱藏在用戶視角中。

 // Create an empty tab sheet. 
    TabSheet tabsheet = new TabSheet(); 


    // Defining Vertical Layout for Tab 1 content 
    final VerticalLayout verLayout1 = new VerticalLayout(); 


     // Tab 2 content 
    VerticalLayout verLayout2 = new VerticalLayout(); 
    verLayout2.setSizeUndefined(); 
    verLayout2.setMargin(true); 

    tabsheet.addTab(verLayout1, "+", null); 
    tabsheet.addTab(verLayout2, "-", null); 
    tabsheet.addListener(listenerForTab()); 




     /** 
    * Method to handle tab sheet hide/show event 
    * 
    * @return TabSheet.SelectedTabChangeListener 
    */ 
    public TabSheet.SelectedTabChangeListener listenerForTab() { 
    _logger.info("Entering in to tabChangeListener of WizardUtil"); 
    // Instance of TabSheet.SelectedTabChangeListener 
    TabSheet.SelectedTabChangeListener listener = new TabSheet.SelectedTabChangeListener() { 
     public void selectedTabChange(SelectedTabChangeEvent event) { 
     TabSheet tabsheet = event.getTabSheet(); 
     Tab tab = tabsheet.getTab(tabsheet.getSelectedTab()); 
     // Tab content displayed on setting height to the tab sheet 
     if(tab.getCaption().equals("+")) { 
      tabsheet.setHeight("100%"); 
     } else { 
      tabsheet.setHeight("33px"); 
     } 
     } 
    }; 
    _logger.info("Exiting from tabChangeListener of WizardUtil"); 
    return listener; 
    } 

Answer 2

所有組件都繼承setVisible（）方法，該方法可以觸發開啓和關閉可見性。這意味着至少所有組件和組件容器。雖然這沒有動畫。 如果你喜歡一些動畫，你必須依靠附加組件，例如Henrik Paul的Drawer做了一些隱藏和顯示動畫。

這是你在想什麼嗎？