[Silk UI Web] Silk UI Tabs

[Silk UI Web] Silk UI Tabs

  
Forge Component
(52)
Published on 15 Nov (4 weeks ago) by OutSystems R&D
52 votes
Published on 15 Nov (4 weeks ago) by OutSystems R&D
How to hide/show tabs based on certain conditions ? 
I am copying it to my project and then using style property of tabs. Is it the recommended practice ?
Hello Kota,

Copying the style properties to your application can be done, but I don't think you'll need to to that.

If you want to add a condition to show/hide a specific tab, just add an If condition from the platform around both the content and the Title of the tab. When the condition is false, then the tab will be empty and won't appear on your page.



Best Regards,
Samuel Jesus
Thanks. 

Samuel Jesus wrote:

Hello Kota,

Copying the style properties to your application can be done, but I don't think you'll need to to that.

If you want to add a condition to show/hide a specific tab, just add an If condition from the platform around both the content and the Title of the tab. When the condition is false, then the tab will be empty and won't appear on your page.



Best Regards,
Samuel Jesus


The problem here is that the is shown to the user, he can click or tap on it and it won show nothing on the content area as the title will be empty. 

I'm trying to hide the tab completely.

Anyone? Anything?


Thanks in advance.

Rubén

Hi Rubén,

I recreated the tabs pattern locally in my applications and added an input variable 'NumberOfTabs' and then on each tab placeholder, I added a 'style' property with the following expression: 

If(NumberOfTabs < 5, "display:none;", "")

Changed the NumberOfTabs < 'Number' to make sense for each tab (5,4,3,2,1).

You could also accomplish this using javascript/jquery, but this is the way I did it.

It would be nice if this was already built in to the pattern.

Let me know if this helps,

Justin