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:
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:
Por fim, você deve declarar as propriedades do seu conteúdo. No nosso exemplo, colocamos apenas um rich-text em cada 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"
}
}
Atividade
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.
No arquivo about-us.jsonc criado anteriormente, adicione um tab-layout#home ao template store.custom#about-us;
Declare o bloco tab-layout#home e adicione como seus children um tab-list#home e um tab-content#home;
Declare um tab-list#home e adicione como seus children um tab-list.item#home1 e um tab-list.item#home2;
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);
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");
Agora, vamos para a parte o conteúdo. Declare um tab-content#home no seu tema e adicione os children tab-content.item#home1 e tab-content.item#home2;
Em cada tab-content.item, declare apenas um rich-text como children (por exemplo, rich-text#home1 e rich-text#home2);
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;
Por fim, adicione os rich-text e declare suas props conforme o código abaixo:
"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"
}
}
:information_source: Lembre-se de acessar a documentação Tab Layout e do Rich Text caso tenha alguma dúvida durante a atividade.
:no_entry_sign: Perdido?
Há algum problema com esse passo? Que tal nos enviar um feedback? :pray:
Layout de abas
:sparkles: Branch: tablayout
Introdução
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 otab-content
. Em cada um destes containers, temos os itens que os compõem. Dentro dotab-list
, temos ostab-list.item
. Já notab-content
, temos ostab-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 umtab-content
como children dotab-layout
:Com isso, temos esses dois containers como componentes do nosso
tab-layout
. O próximo passo é declarar ostab-list.item
etab-content.item
como children dotab-list
e dotab-content
, respectivamente:Na próxima etapa, temos declarar que 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 umtab-list.item
com umtab-content.item
.A seguir, vamos declarar as children e as props dos
tab-content.item
.No array de children, é possível incluir diversos blocks como
rich-text
,info-card
,image
,flex-layout
e etc.Na prop
tabId
, é necessário incluir os mesmos ids declarados nostab-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 cadatab-content.item
:Atividade
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.
about-us.jsonc
criado anteriormente, adicione umtab-layout#home
ao templatestore.custom#about-us
;tab-layout#home
e adicione como seus children umtab-list#home
e umtab-content#home
;tab-list#home
e adicione como seus children umtab-list.item#home1
e umtab-list.item#home2
;tab-list.item#home1
de maneira que a interface exiba o texto "Major Appliances". (Dica: não se esqueça que incluir nas props umtabId
="majorAppliances"
e a propriedadedefaultActiveTab
=true
);tab-list.item#home2
de maneira que a interface exiba o texto "Electronics". (Dica: não se esqueça que incluir nas props umtabId
="electronics"
);tab-content#home
no seu tema e adicione os childrentab-content.item#home1
etab-content.item#home2
;tab-content.item
, declare apenas umrich-text
como children (por exemplo,rich-text#home1
erich-text#home2
);tabId
em cadatab-content.item
de maneira que aconteça o link entre otab-list
criado anteriormente etab-content
;Por fim, adicione os
rich-text
e declare suas props conforme o código abaixo::information_source: Lembre-se de acessar a documentação Tab Layout e do Rich Text caso tenha alguma dúvida durante a atividade.
:no_entry_sign: Perdido?
Há algum problema com esse passo? Que tal nos enviar um feedback? :pray:
Criar feedback
Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.