# Proper use of tab containers

**URL:** <https://forum.inductiveautomation.com/t/proper-use-of-tab-containers/101352>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [January 24, 2025, 3:47pm UTC](https://forum.inductiveautomation.com/t/proper-use-of-tab-containers/101352 "2025-01-24T15:47:17Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Roman\_Rozenshteyn](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@Roman\_Rozenshteyn](https://forum.inductiveautomation.com/u/Roman_Rozenshteyn)\
**Post date:** [January 24, 2025, 3:47pm UTC](https://forum.inductiveautomation.com/t/proper-use-of-tab-containers/101352/1 "2025-01-24T15:47:17Z")

</div>

Not sure if I can formulate the question correctly but, here we go...

I recently downloaded a Perspective resource which seems to be a take on the Rockwell PlantPAx framework, see below:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/1/9152097701c8963dd4e2badc033caaf609677dc7.png)

The author of this resources uses the flex container enable property to simulate switching tabs (using the left pane buttons).

**Question** : is this the preferred way to accomplish what seems to be a task for the tab container?

I have a feeling that this was really the best way to do it since the left side contains two parts. The changing tab view and the static status view (the part with state and lock symbol). Just curious if anyone else has done it differently.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [January 24, 2025, 3:58pm UTC](https://forum.inductiveautomation.com/t/proper-use-of-tab-containers/101352/2 "2025-01-24T15:58:10Z")

</div>

I haven't looked at that resource, but I get a sense of what they are doing. I didn't really like this approach since switching "tabs" would always intialize.

I started using the carousel component. You can set `lazyLoad` so the views only load when necessary, but once you load them they continue to update and switching "tabs" is snappier and any values will remain unchanged.

---

<div class="post-metadata">

**Author:** ![Roman\_Rozenshteyn](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@Roman\_Rozenshteyn](https://forum.inductiveautomation.com/u/Roman_Rozenshteyn)\
**Post date:** [January 24, 2025, 4:27pm UTC](https://forum.inductiveautomation.com/t/proper-use-of-tab-containers/101352/3 "2025-01-24T16:27:15Z")

</div>

In your example, is it possible to change carousel views using the side buttons?

---

<div class="post-metadata">

**Author:** ![brian.mcenulty](https://avatars.discourse-cdn.com/v4/letter/b/b77776/32.png) [@brian.mcenulty](https://forum.inductiveautomation.com/u/brian.mcenulty)\
**Post date:** [January 24, 2025, 4:33pm UTC](https://forum.inductiveautomation.com/t/proper-use-of-tab-containers/101352/4 "2025-01-24T16:33:08Z")

</div>

Yes, you can script the buttons to change the "activePane" property of the carousel

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [January 24, 2025, 5:40pm UTC](https://forum.inductiveautomation.com/t/proper-use-of-tab-containers/101352/5 "2025-01-24T17:40:22Z")

</div>

> [@Roman\_Rozenshteyn](#):
>
> The author of this resources uses the flex container enable property

I missed this, a flex container doesn't have an enable prop.

---

<div class="post-metadata">

**Author:** ![Roman\_Rozenshteyn](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@Roman\_Rozenshteyn](https://forum.inductiveautomation.com/u/Roman_Rozenshteyn)\
**Post date:** [January 24, 2025, 6:07pm UTC](https://forum.inductiveautomation.com/t/proper-use-of-tab-containers/101352/6 "2025-01-24T18:07:39Z")

</div>

> [@jlandwerlen](#):
>
> I missed this, a flex container doesn't have an enable prop.

Misspoke, it's the **display** property.

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [January 24, 2025, 7:20pm UTC](https://forum.inductiveautomation.com/t/proper-use-of-tab-containers/101352/7 "2025-01-24T19:20:58Z")

</div>

Depending on the requirements I do this so I can have the items in each flex container already rendered since the tab container destroys the instance of the closed tabs. There may be a property in a newer version that avoids that though, but I would have to check to verify.

Edit: Yes this does exist so that problem doesn't really exist with v8.1.5+

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/6/26c7d4f237c17b3df3cf6b8ae11454415adb53e0.png)

---

<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:** [January 27, 2025, 12:33pm UTC](https://forum.inductiveautomation.com/t/proper-use-of-tab-containers/101352/8 "2025-01-27T12:33:13Z")

</div>

Another possible reason to not use the tab strip component in earlier versions of 8.1 was that there was no way to hide tabs easily. In later versions a "disabled" prop was added for each tab which, somewhat confusingly, hides the tab.

Edit: Actually, perhaps this was always there... Just requires CSS knowledge to know how to actually hide the tabs! (I found this in a colleague's project)

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