Open github-learning-lab[bot] opened 4 years ago
:white_check_mark::white_check_mark::white_check_mark::x::x::white_check_mark::white_check_mark::white_check_mark::x::white_check_mark:
:white_check_mark: Add a tab-layout#home
to your store.custom
template
:white_check_mark: Declare the block tab-layout#home
with tab-list#home
and tab-content#home
block as children
:white_check_mark: Declare the block tab-list#home
with two tab-list.item
blocks as children
:x: Your tab-list.item#home1 block does not show the text "Major Appliances"
:x: Your tab-list.item#home2 block does not show the text "Electronics"
:white_check_mark: Create tab-content#home
with two tab-content.item
blocks
:white_check_mark: Create tab-content#home
with two tab-content.item
blocks
:white_check_mark: Add rich-text
blocks to each tab-content.item
:x: Could not find expected tabId
s listed as props of tab-content.item
s
:white_check_mark: Declare the expected rich-text
blocks that should show up in each tab
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::x::white_check_mark:
:white_check_mark: Add a tab-layout#home
to your store.custom
template
:white_check_mark: Declare the block tab-layout#home
with tab-list#home
and tab-content#home
block as children
:white_check_mark: Declare the block tab-list#home
with two tab-list.item
blocks as children
:white_check_mark: Make tab-list.item#home1 block show "Major Appliances"
:white_check_mark: Make tab-list.item#home2 block show "Electronics"
:white_check_mark: Create tab-content#home
with two tab-content.item
blocks
:white_check_mark: Create tab-content#home
with two tab-content.item
blocks
:white_check_mark: Add rich-text
blocks to each tab-content.item
:x: Could not find expected tabId
s listed as props of tab-content.item
s
:white_check_mark: Declare the expected rich-text
blocks that should show up in each tab
:white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Add a tab-layout#home
to your store.custom
template
:white_check_mark: Declare the block tab-layout#home
with tab-list#home
and tab-content#home
block as children
:white_check_mark: Declare the block tab-list#home
with two tab-list.item
blocks as children
:white_check_mark: Make tab-list.item#home1 block show "Major Appliances"
:white_check_mark: Make tab-list.item#home2 block show "Electronics"
:white_check_mark: Create tab-content#home
with two tab-content.item
blocks
:white_check_mark: Create tab-content#home
with two tab-content.item
blocks
:white_check_mark: Add rich-text
blocks to each tab-content.item
:white_check_mark: Add tabId
s to tab-content.item
s
:white_check_mark: Declare the expected rich-text
blocks that should show up in each tab
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.
Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.