Tab layout

Introduction

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:

{
  "store.home": {
    "blocks": [..."tab-layout"]
  }
}

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

...
"tab-layout": {
  "children": [
    "tab-list",
    "tab-content"
  ]
}

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:

...
"tab-list": {
  "children": [
    "tab-list.item#1",
    "tab-list.item#2"
    ]
}

...
"tab-content": {
  "children": [
    "tab-content.item#1",
    "tab-content.item#2"
    ]
}

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.

...
"tab-list.item#1": {
  "props": {
    "tabId": "majorAppliances",
    "label": "Major Appliances",
    "defaultActiveTab": true
  }
},
"tab-list.item#2": {
  "props": {
    "tabId": "electronics",
    "label": "Electronics"
  }
}

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.

...
"tab-content.item#1": {
  "children": [
    "rich-text#1"
  ],
  "props": {
    "tabId": "majorAppliances"
  }
},
"tab-content.item#2": {
  "children": [
    "rich-text#2"
  ],
  "props": {
    "tabId": "electronics"
  }
}

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

"rich-text#1": {
  "props": {
    "text": "Texto para Major Appliances",
    "textPosition": "CENTER",
    "font": "t-heading-3"
  }
},
"rich-text#2": {
  "props": {
    "text": "Texto para Electronics",
    "textPosition": "CENTER",
    "font": "t-heading-3"
  }
}

Activity

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:

   JSON

   "rich-text#home1": {
     "props": {
       "text": "Área do conteúdo da tab-list.item com  tabId = majorAppliances",
       "textPosition": "CENTER",
       "font": "t-heading-3"
     }
   },
   "rich-text#home2": {
     "props": {
       "text": "Área do conteúdo da tab-list.item com  tabId = electronics",
       "textPosition": "CENTER",
       "font": "t-heading-3"
     }
   }
   

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

Any questions?

See the answersheet for this step or check our [office hours] on the VTEX Developers channel(https://www.youtube.com/c/VTEXDevelopers)