Teste Automatizado Tab Select
Como criar o Componente Tab Select
Tutorial
- O Componente Tab Select é o nosso antigo abas horizontal.
No Storyblok foi desenvolvido tanto o "Card Tab Select" quanto o "Tab Select".
No "Card Tab Select" é onde estão todas as regras do componente e temos a opção de montá-lo sem a necessidade de estar separados por abas. Se desejarmos criá-lo como o nosso antigo abas horizontal, primeiramente necessitamos criar o "Card Tab Select" com todas as suas regras e depois criarmos este o "Tab Select" simplesmente para colocarmos os títulos das nossas abas e adicionarmos os Itens de Card Tab Selects nela. - Navegar em: Conteúdo>Conteúdos Compartilhados>Tab Select>Itens>Clicar em +Item e inserir o nome do arquivo
O nome do arquivo deve seguir a semântica:1 - Nome do componente2 - Caminho de onde se encontra o componente, tudo minúsculo e separados por hífen, se pf ou pj:Ex: item-tab-select-home-produtos-fone-fixo-pj >Salvar3 - Será exibida a tela com os campos "Nome da Tab" e "Item Card Tab Select"
4 - Inserir o nome da sua "Tab" (o nome da tab é o título da aba de cada "Card Tab Select")5 - Para o campo "Item Card Tab Select" temos que selecionar uma lista de "Card Tab Select" (Ver no índice deste manual "Como criar o Componente Card Tab Select">Salvar>Publicar - Navegar em: Conteúdo>Conteúdos Compartilhados>Tab Select>Listas>Clicar em +Item e inserir o nome do arquivo
O nome do arquivo deve seguir a semântica:1 - Nome do componente2 - Caminho de onde se encontra o componente, tudo minúsculo e separados por hífen, se pf ou pj:Ex: lista-tab-select-home-produtos-fone-fixo-pj >Salvar3 - Inserir do lado direito da tela no campo "Tab Select Itens", os itens do card criados anteriormente que farão parte do seu Tab Select>Salvar>Publicar - 1- Acessar a página que irá receber o componente em "Home > Site"; (Ver no índice deste manual o item "Como criar página no storyblok)2- Na aba "Geral", clicar em "+Adicionar bloco";3- Selecionar na lista, o item "Tab Select" criado anteriormente;4- Isso irá criar um bloco com o nome "Tab Select vazio". Clicar nele;5- Na aba "Geral", clicar em "Selecionar" e na caixa em branco de "Selecionar Tab Select";6- Isso ira exibir uma lista com os itens do Tab Select. Clique na Lista do Tab Select desejado;7- Se desejar inserir um Titulo, subtítulo e rodapé para o bloco criado, clicar na aba "Opções" e em "Propriedades Avançadas" e inserir os valor nos respectivos campos.8- Clicar em "Salvar" e "Publicar"
1) Título componente Tab Select
Subtítulo componente Tab Select
Rodapé 1 - ID Link âncora: TAB-SELECT-ANCORA-01 Link => :)
2) Título componente Tab Select
Subtítulo componente Tab Select
Titulo Tab Select 12
Mussum Ipsum, cacilds vidis litro abertis. Todo mundo vê os porris que eu tomo, mas ninguém vê os tombis que eu levo!
Rodapé slot 2
3) Título componente Tab Select
Rodapé 3
4) Subtítulo componente Tab Select
Rodapé 4
6) Título componente Tab Select
Subtítulo componente Tab Select com Card de Vendas
Rodapé 6
7) Título Componente Tab Select
Subtítulo Componente Tab Select com Cards
Rodapé
Botões flutuantes
Botões flutuantes