Sidebar-Menü ähnlich wie Akkordeon

Question

Kennt jemand einen Weg, um eine Art Akkordeon-Menü ähnlich wie die Vaadin Dokumentierung here zu tun. Von besonderer Bedeutung ist es, ein Untermenü zu erweitern oder zu reduzieren, wie pro diesen Bilder: Abbildung 1: erweitert „Introduction“ Menü

Abbildung 2: „Einführung“ Menü

Um ehrlich zusammengebrochen zu sein Ich interessiere mich nicht so sehr für den Auf- oder Abwärtspfeil. Mir ist es meist wichtig, dass ich auf die Überschrift klicken kann, um sie zu erweitern, und dann auf sie klicke, um sie zu reduzieren, unabhängig von anderen Untermenüs. Irgendwelche Ideen, wie man in Vaadin macht?

Answer 1

Sie können so etwas einfach tun. Sie müssen eine Ressource für die Pfeile nach oben und nach unten erstellen und dann einfach den Inhalt, den Sie ausblenden möchten, in den Inhalt VerticalLayout einfügen.

 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

Ich landete die StackPanel add-on verwenden, mit ganz wenigen CSS Anpassungen an mein Thema common.scss Datei. Funktioniert ziemlich gut für ein Valo-Menü, das als das gleiche Sidebar-Menü in der Dashboard-Demo gestartet wurde.

Siehe here für eine ausführlichere Diskussion, wenn Sie neugierig sind. Eines der Poster dort vorgeschlagen auch Tree oder TreeTable, die auch in dieser Art von Situation funktionieren würde, nur nicht so schön in meinem Fall.