Perspective Tab Container Individual Tab Style change

[ott.sellis]

Hi,

Is there any way to alter the style of a single tab in a tab container?

Asking this, because we would like to paint the “Alarms” tab with var(–error) or var(–warningSecondary) based on if there are any “ActiveUnAcked” or “ActiveAcked” errors with the current object.

To make it plain an simple:

I would like to paint only this tab red or yellow as we have active alarms.

[andreas]

Hi,

By passing in a view to the tabs, you can customize them as you want and control the individual tab backgrounds.
For instructions, follow this post:

Perspective Tab Container

Since Tabs can render as either text or Views, you just need to supply a View which has both an Icon and a Label present. (Update: documentation) [Screen Shot 2020-06-08 at 9.50.25 AM] Here’s how I did this: Right-click props.tabs[1], and select “Change To” and select “Object”. Expand props.tabs[1] and select “Add Object Member”, then supply a key of “viewPath”. Supply a valid viewPath. [Screen Shot 2020-06-08 at 9.50.14 AM] In my project, there exists a View (“Experimentation/Repl”) which…

[ott.sellis]

Thank you for the information, @andreas!

What I came up with was a solution to have an alarm icon in the background of the Tab (lower in the z-order) and then set the inactive background of the tabs to be transparent. This solution is looking pretty decent actually and it goes with my overall theme of showing alarms via alarm icon.