Hi Erik, I really like this component. Is there a way to get components to

Directory SlideTab
1

Hi Erik,

I really like this component. Is there a way to get components to move out of the way then you open the SlideTab. Like the AppLayout does, but the AppLayout is more of a top level container. My use case is having a grid resize to fit the SlideTab on the page once you’ve ‘opened’ it.

Thanks!

Stuart

2

Hi Stuart,

Glad that you like it! Unfortunately, that is not something that can be easily done. The component is explicitly coded to not take space from other components.

3

Hi Erik,

No worries. I actually got it to work but adding an expand/collapse listener which changed the padding of the other component at the same rate so it looks seamless.

 slideTab.addToggleListener(slidetab -> {
	if (slidetab.isExpand()) { 
		componentToSlide.getStyle().set("padding-left", "330px");
 	} else {
	    componentToSlide.getStyle().set("padding-left", "0px");
	}
});

Regards,

Stuart

4

That’s smart!

5

Cheers.

Is there a way to keep the slide tab open once you’ve navigated away and come back? I’ve added an attach listener to set whether the SlideTab is expanded or not, and although it thinks it is, it doesn’t appear.

slideTab.addToggleListener(listener -> {
	if (listener.isExpand()) { 
		expanded = true;
	    toSlide.getStyle().set("padding-left", "410px");
 	} else {
   		expanded = false;
   		toSlide.getStyle().set("padding-left", "0px");
   	}
});
	       
slideTab.addAttachListener(listener -> {
	slideTab.setExpanded(expanded, true); 
});

18476708.png
18476711.png

6

How do you store the expanded state? Are you using UI-scoped Spring beans, or some other solution?

In a pure Jetty demo project, I tried to set expanded to true on attach, and just refresh the page. At least that works.

I can try to mimic your setup once I know what it is.

7

I’m just storing the state in a boolean in the parent component the SlideBar is contained in. (the log shows its set to true, and I’ve tried .setExpanded(true, true); ).
I’m swapping the parent components in and out by calling .add(component) and .remove(component) on the main container div.

When I click on the arrow in the expanded-nothere.png image, it act like it was expanded. So although the SlideBar doesn’t change, the ToggleListener is called and the padding of the toSlide component is changed to “0px”.

Its like the backend knows it is expanded, but the frontend doesn’t. The ‘expanded’ class is missing from the slide-tab and the id=“content” Div has its width set to 0px. (I can add the class back in in the listener code, but I can’t update the width of the ‘contents’ parent in the shadow dom.

Stuart.

8

Hi Stuart, the problem is that the component also stored the expanded state internally.

On attach, when you call setExpanded(true), in the internal state expanded is already true, so it doesn’t do anything.

However, it is not aware that the browser element is not expanded.

I released a new version 2.2.0 where it automatically expands upon attach if the internal expanded state is set to true, so it should work out of the box without keeping track of the expanded state manually. Let me know how it works for you.

9

Hi Erik,

Thats awesome and a quick update! :-)

Yes it works great. The only thing I’d add is if it could not do the animation if it’s already expanded. (not sure if that is possible by switching in and out the transition css tag).

Stuart.

10

Was a bit tricky actually, but I published version 2.2.1 to fix it. It should now not animate on re-attach by default, but you can call setAnimateOnAttach(true) to make it animated. Hopefully…

11

Hi Erik,

Thats awesome and works a treat!.

Thanks so much and thanks so much for the quick turn around.

Stuart.

12

Ah just one thing. If you slide it in and out now after onAttach has been fired (and it is already expanded), it animates on collapse, but doesn’t animate on expand.

Stuart

13

Hi Stuart,

I can’t reproduce that. Do you slide it in and out programmatically or manually?