CODEWITHSUNDEEP
vaadin7
Tony B
Tony B

Reputation: 949

sidebar menu similar to accordion

Does anyone know a way to do a sort of accordion menu similar to the vaadin documation here. Of special importance is to expand and collapse a sub-menu, as per these images: expanded "Introduction" menu Figure 1: expanded "Introduction" menu

collapsed "Introduction" menu Figure 2: collapsed "Introduction" menu

To be honest, I don't care so much for the up or down arrow. I mostly care about being able to click on the caption to expand, then click on it to collapse, independent of other sub-menus. Any ideas how to do with in Vaadin?

Upvotes: 0

Views: 474

Answers (2)

Tony B
Tony B

Reputation: 949

I ended up using the StackPanel add-on, with quite a few CSS adjustments to my theme common.scss file. Works rather well for a valo-menu that started as the same sidebar menu they have in the dashboard demo.

See here for a fuller discussion, if you are curious. One of the posters there also suggested using Tree or TreeTable, which also would work in this type of situation, just did not look as nice in my case.

Upvotes: 0

Chris M
Chris M

Reputation: 1068

You can do something simple like this. You'll need to create a resource for the up and down arrows, then simply put your content you want to hide into the 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);

Upvotes: 1

Related Questions