Accordion panel remove

Hi, I’m newbie in Vaadin stuff.

I’d like to create an inherit component from Accordion. I’d like to be able to add some toolbuttons in each panel titlebar like refresh button, remove button like you did in tabpanel in tabsheet.

From your example, I tried to add some methods from tabsheet example as well to do this behavior. But I can’t reach the inherit class as tabsheet which get remove() method for example. Can I do this like that or have I to create my own accordion class?

public AccordionIconsExample() {
setSpacing(true);

    Label l1 = new Label("There are no previously saved actions.");
    Label l2 = new Label("There are no saved notes.");
    Label l3 = new Label("There are currently no issues.");

    a = new Accordion();
    a.setHeight("300px");
    a.setWidth("400px");
    final Tab t1 = a.addTab(l1, "Saved actions", icon1);
    t1.setClosable(true);
    final Tab t2 = a.addTab(l2, "Notes", icon2);
    t2.setClosable(true);
    final Tab t3 = a.addTab(l3, "Issues", icon3);
    t3.setClosable(true);
    
    System.out.println("parent ==> " + a.getSelectedTab().getParent());
    a.setCloseHandler((CloseHandler)a.getParent());
    
    a.addListener(this);

    addComponent(a);
}

Thanks in advance,

Christophe

The Accordion component currently does not support this, and you would need to extend the client side part of Accordion to add support for this.

The Accordion is a TabSheet, and the server side mechanisms are present for removing tabs based on the “close” variable being set from the client side, but the client side widget never sends this event. For other buttons etc. you would also need to extend the server side handling of variable updates from the client.

You could also take a look at the
Drawer
add-on and possibly customize it, or simply implement the Accordion functionality on the server side (optionally using the
Animator
add-on), to achieve what you want. The latter is probably the easiest option, and the small additional overhead should not be an issue in most cases.

Thanks Henri,

I’ll try this and get you a feeback.

Christophe

Hi Henry,
Can we change the height of Tab accordian using styles. I am having some requirement shown in screenshot. attached.

Regards
Ashish.
11839.jpg

Yes, you can. You will need to use CSS for that.