How to style individual tab of tab container?

How can I style a particular tab in a Perspective tab container? I have a preconditions tab and I want to flash it some colour if all of the preconditions aren’t met.

And if I can’t, is this a feasible feature request?

I would actually render the tab as a View:
Modify the tab index to be an object and set up the properties as shown:
Screen Shot 2020-11-11 at 11.29.06AM
From the docs:

Content to display in the menu as tabs. Each tab in this array may be either a string to display as the tab text or an object with viewPath and optionally viewParams. If the latter, a view will render as the tab in place of text.

2 Likes

Awesome, I didn’t know you could do that! I should read the user manual more often…

Done!
image

Read the whole thing. :rofl:

I’m not sure if an engineer can do that?? :laughing:

Also, it’s not possible to have all tabs preloaded is it? All of my tabs are dynamically populated on startup by browsing the tag structure (not nested thankfully) so it’s super quick but still takes half a second or so, but if it was preloaded it would be fairly instantaneous (as in Vision)

Edit. to be fair, it’s pretty damn quick still…

@nminchin @cmallonee
Gents,

I hope you don't mind me hopping onto this thread. If I take your advice on the tab indexes, does this mean that each Tab would need to have it's own view? Perhaps like an inheritable component?
I created a test view, configured to fit into one tab - which is cool, but then I realized that I would need many tab views.

Also - to kind of piggy back on the topic, as far as customizing: In the normal tab setup, I would like to change the text size of the tab itself, and so far the menuStyle, contentStyle, and style change the controls in the Tab Container, not the Tab header itself. (I've only read a few threads on Tabs to this point.)

So far, this thread has pertained to only the content of the area where text is rendered for each tab - so I'm going to answer for that first. If you're referring to the contents of the body of the Tab, correct me, and we can continue with how to use those.

If you're okay with the styling of the regular text content of a Tab, then you could leave the entry of that index as a plain entry and just supply text. If you want to do specialized styling on a per-tab basis, then ANY tab which would not have the component-wide styling would need to be rendered as a View. Now, you could have a SINGLE View which accepts some text param and some params which drive styling, and use that single View for each of the entries, or you could have specialized Views for each entry. Do what you want - do what you need.

While oddly-positioned to drive tab appearance, you actually want to use tabStyle.active and the sibling properties to drive appearance depending on the state of the tab.

So, if I want to apply styling to these tabs, such as these tabs:
image

I would need to create a view (essentially) for each one. Or use the tabStyle to format active and inactive tabs.

As far as this goes:

what is the difference amongst the three styling properties? They all appear to do format the same content.

What!? Wait... That looks like sarcasm. But who doesn't read the whole thing?

Is there any documentation or a full list for these kinds of properties? I can only find those two; "viewPath", "viewParams" along with a third "runWhileHidden".

I have the same issue, wanting to style a specific tab, regardless of whether it's active or inactive.

Are you looking at the v8.1 documentation? It has been fleshed out since Cody posted way back then.

I'm afraid so, but I assume that this is the extent of what you can manipulate then (those three properties I mentioned)?
My intuition led me to believe that there might've been some more properties to control, for each tab-instance. Color or style for example.

I don't see it anywhere in the Tab Container documentation, or am I missing it?

If you need more control, use the viewPath property and style the nested view.