# How to style individual tab of tab container?

**URL:** <https://forum.inductiveautomation.com/t/how-to-style-individual-tab-of-tab-container/40558>\
**Category:** Ignition\
**Tags:** perspective, ignition80\
**Created:** [November 11, 2020, 7:18pm UTC](https://forum.inductiveautomation.com/t/how-to-style-individual-tab-of-tab-container/40558 "2020-11-11T19:18:55Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 11, 2020, 7:18pm UTC](https://forum.inductiveautomation.com/t/how-to-style-individual-tab-of-tab-container/40558/1 "2020-11-11T19:18:55Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [November 11, 2020, 7:30pm UTC](https://forum.inductiveautomation.com/t/how-to-style-individual-tab-of-tab-container/40558/2 "2020-11-11T19:30:32Z")

</div>

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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/4/24d55d425ba004fe3f68d9d6878c645a436e19e5.png)  
From the [docs](https://docs.inductiveautomation.com/display/DOC80/Perspective+-+Tab+Container):

> 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.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 11, 2020, 7:34pm UTC](https://forum.inductiveautomation.com/t/how-to-style-individual-tab-of-tab-container/40558/3 "2020-11-11T19:34:19Z")

</div>

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

Done!  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/c/6cbad035a175a4a9759a1666bd5c855130a8ebe1.png)

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [November 11, 2020, 7:42pm UTC](https://forum.inductiveautomation.com/t/how-to-style-individual-tab-of-tab-container/40558/4 "2020-11-11T19:42:57Z")

</div>

Read the whole thing. 🤣

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 11, 2020, 7:44pm UTC](https://forum.inductiveautomation.com/t/how-to-style-individual-tab-of-tab-container/40558/5 "2020-11-11T19:44:30Z")

</div>

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

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…

 ![Tab Container change tabs with browseTags speed](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/4/24b2e8d9033bb53ed937ce4dd285a9accce49bc0.gif)

---

<div class="post-metadata">

**Author:** ![mdemaris](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mdemaris/32/54639_2.png) [@mdemaris](https://forum.inductiveautomation.com/u/mdemaris)\
**Post date:** [June 14, 2023, 6:57pm UTC](https://forum.inductiveautomation.com/t/how-to-style-individual-tab-of-tab-container/40558/6 "2023-06-14T18:57:22Z")

</div>

@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.)

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [June 14, 2023, 9:28pm UTC](https://forum.inductiveautomation.com/t/how-to-style-individual-tab-of-tab-container/40558/7 "2023-06-14T21:28:06Z")

</div>

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.

> [@mdemaris](#):
>
> does this mean that each Tab would need to have it's own view?

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.

> [@mdemaris](#):
>
> In the normal tab setup, I would like to change the text size of the tab itself

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.

---

<div class="post-metadata">

**Author:** ![mdemaris](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mdemaris/32/54639_2.png) [@mdemaris](https://forum.inductiveautomation.com/u/mdemaris)\
**Post date:** [June 15, 2023, 12:34am UTC](https://forum.inductiveautomation.com/t/how-to-style-individual-tab-of-tab-container/40558/8 "2023-06-15T00:34:40Z")

</div>

> [@cmallonee](#):
>
> 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.

So, if I want to apply styling to these tabs, such as these tabs:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/7/9728aa5034f07f703ddde670048f28ef96e00c99.png)

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:

> [@mdemaris](#):
>
> and so far the `menuStyle, contentStyle, and style` change the controls in the Tab Container

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

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [June 15, 2023, 12:42am UTC](https://forum.inductiveautomation.com/t/how-to-style-individual-tab-of-tab-container/40558/9 "2023-06-15T00:42:44Z")

</div>

> [@cmallonee](#):
>
> Read the whole thing.

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

---

<div class="post-metadata">

**Author:** ![Asbjoern\_Gram](https://avatars.discourse-cdn.com/v4/letter/a/ed8c4c/32.png) [@Asbjoern\_Gram](https://forum.inductiveautomation.com/u/Asbjoern_Gram)\
**Post date:** [August 31, 2023, 12:56pm UTC](https://forum.inductiveautomation.com/t/how-to-style-individual-tab-of-tab-container/40558/10 "2023-08-31T12:56:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [August 31, 2023, 2:35pm UTC](https://forum.inductiveautomation.com/t/how-to-style-individual-tab-of-tab-container/40558/11 "2023-08-31T14:35:35Z")

</div>

Are you looking at [the v8.1 documentation](https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Tab+Container)? It has been fleshed out since Cody posted way back then.

---

<div class="post-metadata">

**Author:** ![Asbjoern\_Gram](https://avatars.discourse-cdn.com/v4/letter/a/ed8c4c/32.png) [@Asbjoern\_Gram](https://forum.inductiveautomation.com/u/Asbjoern_Gram)\
**Post date:** [September 1, 2023, 5:24am UTC](https://forum.inductiveautomation.com/t/how-to-style-individual-tab-of-tab-container/40558/12 "2023-09-01T05:24:07Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [September 1, 2023, 12:49pm UTC](https://forum.inductiveautomation.com/t/how-to-style-individual-tab-of-tab-container/40558/13 "2023-09-01T12:49:34Z")

</div>

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