How to conditionally render components based on Tabs component status

[Mil4n0r]

Hi, I was wondering if there is any known way to render different components based on currently active Tab or if there are any plans for adding the possibility to do it.

[Janpot]

#1549 contains some instructions on how this component was intended to be used.
I'm adding an example to our repository to illustrate the usage better.
I'm also opening a ticket for improved documentation around this feature.

For an improved UX You can upvote the ticket #747.

[Mil4n0r]

Sorry about revisiting this topic after marking as resolved. I realised that a small margin is added with each container added (even though all of them are hidden except for one), which is specially notable when the Tabs number becomes high. Would it be possible to overcome this problem? The problem can be easily spotted in the video from this comment at 1:00

[Janpot]

This should have been fixed in #3803. Which version of Toolpad are you using?

[Mil4n0r]

I am using v1.50 and cannot update to latest version because of a problem that I am facing when using components that require styled-components (#3643).

Is there any workaround that I can do in the current version? Nonetheless I will try to prepare a demo soon to demonstrate the problem stated in that issue. The following line is not fixing it for me:

'&:empty': {
  display: 'none',
},

[Mil4n0r]

It is now solved, the problem was that the Container that I was using had a slightly different Wrapper than yours. In my case I wasn't setting it to null but to display: none and that was causing the issue.

I still have a bit of trouble when dragging and dropping in tab containers other than the first, but that seems to happen in latest version as well and it does not seem like a major problem.

Thanks for your help!

[Janpot]

Thank you for the feedback, I'm opening #3865 to hopefully improve the UX of working with container components.