O Tab Layout é um paradigma de estruturação de layouts criado no Store Framework para permitir a construção de layouts com abas ou guias.

Neste paradigma, temos dois containers: o tab-list e o tab-content. Em cada um destes containers, temos os itens que os compõem. Dentro do tab-list, temos os tab-list.item. Já no tab-content, temos os tab-content.item.

Abaixo, veremos um exemplo de implementação de um tab layout.

Primeiro, é necessário declarar o block tab-layout no template desejado:

Depois, é necessário declarar um tab-list e um tab-content como children do tab-layout:

Com isso, temos esses dois containers como componentes do nosso tab-layout. O próximo passo é declarar os tab-list.item e tab-content.item como children do tab-list e do tab-content, respectivamente:

Na próxima etapa, temos que declarar as propriedades dos tab-list.item. O código abaixo gera uma interface de tabs como a desta imagem:

A propriedade tabId é muito importante, pois ela é a chave que conecta o botão de um tab-list.item com um tab-content.item.

A seguir, vamos declarar as children e as props dos tab-content.item.

No array de children, é possível incluir diversos blocos como rich-text, info-card, image, flex-layout e etc.

Na prop tabId, é necessário incluir os mesmos identificadores (ids) declarados nos tab-list.item para que o link entre a aba e o conteúdo funcione.

Por fim, você deve declarar as propriedades do seu conteúdo. No nosso exemplo, colocamos apenas um rich-text em cada tab-content.item:

Nesta atividade, vamos criar a estrutura simples de um tab layout, conforme imagem abaixo. Mais tarde, vamos incluir algum conteúdo para estilizar nossa página customizada.

1. No arquivo home.jsonc criado anteriormente, adicione um tab-layout#home;

2. Declare o bloco tab-layout#home e adicione como seus filhos um tab-list#home e um tab-content#home;

3. Declare um tab-list#home e adicione como seus filhos um tab-list.item#home1 e um tab-list.item#home2;

4. Declare as props do tab-list.item#home1 de maneira que a interface exiba o texto "Major Appliances". (Dica: não se esqueça que incluir nas props um tabId = "majorAppliances" e a propriedade defaultActiveTab = true);

5. Declare as props do tab-list.item#home2 de maneira que a interface exiba o texto "Electronics". (Dica: não se esqueça que incluir nas props um tabId = "electronics");

6. Agora, vamos para a parte o conteúdo. Declare um tab-content#home no seu tema e adicione os filhos tab-content.item#home1 e tab-content.item#home2;

7. Em cada tab-content.item, declare apenas um rich-text como filho (por exemplo, rich-text#home1 e rich-text#home2);

8. Depois, inclua uma prop tabId em cada tab-content.item de maneira que aconteça o link entre o tab-list criado anteriormente e tab-content;

9. Por fim, adicione os rich-text e declare suas props conforme o código abaixo:

   
   

   _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

   }