类似于accordion的侧栏菜单

Question

谁知道一种类似vaadin documation here的手风琴菜单的制作方法。特别重要的是展开和折叠子菜单，如下图所示：

图1:展开的“介绍”菜单

​

图2:折叠的“介绍”菜单

老实说，我不太关心向上或向下箭头。我最关心的是能够点击标题来展开，然后点击它来折叠，独立于其他子菜单。有什么办法用Vaadin吗？

Answer 1

你可以像这样做一些简单的事情。您需要为向上和向下箭头创建一个资源，然后简单地将您想要隐藏的内容放入content 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，对我的主题common.scss文件进行了相当多的CSS调整。对于与仪表板演示中相同的侧边栏菜单启动的valo菜单来说，效果相当好。

如果您感兴趣，请访问here了解更全面的讨论。其中一个帖子还建议使用Tree或TreeTable，这也可以在这种情况下工作，只是在我的情况下看起来不太好。