與手風琴相似的邊欄菜單

Question

有沒有人知道一種方法來做類似於手寫文件here的手風琴菜單。特別重要的是要展開和摺疊子菜單，按這些圖片： 圖1：擴展的「簡介」菜單

圖2：倒塌「介紹」菜單

說實話，我不太在意向上或向下的箭頭。我主要關心是否能夠點擊標題來展開，然後點擊它來摺疊，而不依賴於其他子菜單。任何想法在Vaadin中如何處理？

Answer 1

你可以做一些簡單的事情。您需要爲向上和向下箭頭創建資源，然後將您想要隱藏的內容放入VerticalLayout內容中。

 Button button = new Button(); 
     final VerticalLayout content = new VerticalLayout(); 
     content.setVisible(false); 
     button.setIcon(UP_ARROW); 
     button.addClickListener(new ClickListener() { 

      @Override 
      public void buttonClick(ClickEvent event) { 


       content.setVisible(!content.isVisible()); 
       if (content.isVisible()) 
       { 
        button.setIcon(UP_ARROW); 
       } 
       else 
       { 
        button.setIcon(DOWN_ARROW); 
       } 


      } 
     }); 


     HorizontalLayout hl = new HorizontalLayout(button, content); 
     addComponent(hl); 

Answer 2

我結束了使用StackPanel add-on，有相當多的CSS調整我的主題common.scss文件。對於在儀表板演示中啓動的同樣的側邊欄菜單啓動的值域菜單效果相當不錯。

請參閱here進行更充分的討論，如果您有興趣的話。其中一張海報也建議使用Tree或TreeTable，這也適用於這種情況，在我的情況下看起來不太好。