侧边栏菜单类似于手风琴

Question

有没有人知道如何做一种类似于vaadin文档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，对我的主题common.scss文件进行了相当多的CSS调整。对于一个valo菜单来说效果相当不错，因为它们在仪表板演示中以相同的侧边栏菜单开始。

如果您感到好奇，请参阅here进行更全面的讨论。其中一张海报还建议使用Tree或TreeTable，这也适用于这种情况，在我的情况下看起来不太好。