[00:00] In this lesson, we'll take a look at the Tab container. The Tab container is a single component with multiple sub-containers, one for each tab. Let's get started, we'll create a brand new View. I'll click the, Create New View button here. I'm going to create a new View called "Tab". I'm going to change the layout to a Tab container, so that our root container uses a Tab container. And let's make a Page so we can look at this, in a Session later. I'll create the view and you can see that the root container is starting off with some tabs. Now if I select the Tab container, you'll notice in the Property Editor, the "Tabs" property. This property is an array. Each element inside of the array, represents a different tab on the component. The value of the element corresponds to the text on the tab. So if I wanted to start titling my tabs, I can simply give a value to each element. If you wanted to add a new tab, you can simply come over to the top here, the little plus icon while you're in design mode and it will add a new tab for you in the array. You can also hit the little plus icon here, add a new value object, and it will add a new item here, with a default value of value. If you needed to remove a tab, of course, just remove the element here or in the Design mode here, you can just click the little x above the tab. It'll ask you to confirm, hit the delete button and the tab goes away. There are a number of style properties down here. For example, we can change the menu type from classic to modern, to give it a more modern feel as we're clicking around. Now when you put the Designer into Preview mode here, you'll notice a couple things. One, you can't remove the tabs anymore, so from the session, we don't allow users to remove tabs. But we're also getting a warning. This is because we haven't placed any components into the sub-containers. Let's go back to design mode. Adding a component is as easy as selecting the tab, coming over to the Component Palette, and drag the component into the container. And just like that, you can see that my gauge here is filling up the entire container. When we have the gauge or the component selected, you'll notice that the position properties here, really only list the tab index. So, if I wanted to change which tab this is located on, I can simply change this to a different number. Now if I head over to index position 1, we should see our gauge. You'll also notice that the component tries to fill up as much space as possible inside of the sub-container. So how would I add multiple components to the same sub-container? I'll switch over to my first tab here, and the way you accomplish that is very simple, you simply need to add either a container to this one sub-container or an embedded view. So for right now, I'll head over to the Component Palette. I'm going to grab a Coordinate container and simply drag that into the sub-container. You can see that the Coordinate container is now inside of this tab here. And if I double click to deeply select the coordinate container, I can start dragging components into here, allowing me to resize, reposition, as well as add additional components inside of this container. Now let's go ahead and save our project here. Click on the cog icon, taking us back to page configuration, and let's take a look at this in our Session. So I'll right click on the page and select Launch URL. If I switch over to my browser here, we can see that I have my first tab here with the Coordinate container and its sub-components. I can switch over to my second tab which now has this one gauge. So now you should have a basic understanding of how the Tab container works. If you wanted to make this more interesting, you could of course have multiple tiers of tabs, which you can accomplish by nesting another Tab container into each sub-container of our original Tab container.