The Tab Layout is a layouts structuring paradigm created in the Store Framework to allow the construction of layouts with tabs or guides.

In this paradigm, we have two containers: the tab-list and the tab-content. In each of these containers, we have the items that compose them. Within the tab-list, we have the tab-list.item. In the tab-content, we have thetab-content.item.

Below, we will see an example of implementing a tab layout.

First, it is necessary to declare the tab-layout block in the desired template:

Then, it is necessary to declare a tab-list and atab-content as children of the tab-layout:

With that, we have these two containers as components of our tab-layout. The next step is to declare tab-list.item and tab-content.item as children of tab-list and tab-content, respectively:

In the next step, we have to declare the properties of the tab-list.item. The code below generates a tab interface like the one in this image:

The tabId property is very important, as it is the key that connects the button of a tab-list.item with a tab-content.item.

Next, we will declare the children and props of tab-content.item.

In children's array, it is possible to include several blocks such as rich-text, info-card, image, flex-layout, and so.

In the tabId prop, it is necessary to include the same identifiers (ids) declared in the tab-list.item for the link between the tab and the content to work.

Finally, you must declare the properties of your content. In our example, we put only one rich-text in each tab-content.item:

In this activity, we will create the simple structure of a tab layout, as shown in the image below. Later, we will include some content to style our customized page.

1. In the home.jsonc file created earlier, add a tab-layout#home;

2. Declare the tab-layout#home block and add atab-list#home and a tab-content#home as your children;

3. Declare a tab-list#home and add a tab-list.item#home1 and a tab-list.item#home2 as your children;

4. Declare the tab-list.item#home1 props so that the interface displays the text "Major Appliances". (Hint: don't forget to include a tabId = "majorAppliances" in the props and the defaultActiveTab = true property);

5. Declare the props of the tab-list.item#home2 so that the interface displays the text "Electronics". (Hint: don't forget to include a tabId = "electronics" in the props);

6. Now, let's move on to the content part. Declare a tab-content#home in your theme and add the children tab-content.item#home1 and tab-content.item#home2;

7. In each tab-content.item, declare only one rich-text as a child (for example, rich-text#home1 and rich-text#home2);

8. Then, include a prop tabId in eachtab-content.item so that the link happens between the tab-list created previously and tab-content;

9. Finally, add the rich-text and declare your props according to the code below:

   
   

   _14

   "rich-text#home1": {

   _14

   "props": {

   _14

   "text": "Área do conteúdo da tab-list.item com tabId = majorAppliances",

   _14

   "textPosition": "CENTER",

   _14

   "font": "t-heading-3"

   _14

   }

   _14

   },

   _14

   "rich-text#home2": {

   _14

   "props": {

   _14

   "text": "Área do conteúdo da tab-list.item com tabId = electronics",

   _14

   "textPosition": "CENTER",

   _14

   "font": "t-heading-3"

   _14

   }

   _14

   }

   
   

Note: Remember to access the Tab Layout and Rich Text documentations if you have any questions during the activity.