Tab

O componente do tipo tab deve ser utilizado quando o criador do tema disponibiliza ao usuário a possibilidade dele navegar em abas de informações. Em um primeiro momento, foi criado pela necessidade de navegação nas configurações de vitrine, porém, pode ser utilizado para outras finalidades. Abaixo é possível visualizar a aparência deste campo.

Exibição do campo tab

Exibição do campo tab

Compatível com o uso de Text, Select e Radio

Estrutura padrão do campo:

"type": "tab", 
"field": "nome_do_campo",
"options": [ 
    { 
        "value": "valor_do_primeiro_botao",
        "content": "Nome que será exibido no botão"
    },
    {
        "value": "valor_do_segundo_botao", 
        "content": "Nome que será exibido no botão" 
    }
]

Os componentes que fizerem parte de cada vitrine deve receber uma chave “tab” com o valor que foi atribuído, assim é possível agrupar esses componentes dentro das vitrines.

Exemplo de utilização do componente tab:

{
    "type": "tab",
    "field": "campo_tabs",
    "options": [
        {
          "value": "aba_a",
          "content": "Primeira Aba A"
        },
        {
          "value": "aba_b",
          "content": "Primeira Aba B"
        }
    ]
},
{
    "label": "Título do select dentro da aba A",
    "type": "select",
    "description": "Descrição da aba atual aberta.",
    "field": "options_01",
    "tab": "aba_a",
    "options": [
        {
          "value": "op_01",
          "content": "Mais Vendidos"
        },
        {
          "value": "op_02",
          "content": "Frete Grátis"
        },
        {
          "value": "op_03",
          "content": "Promoção"
        }
    ]
},	
{
    "label": "Título do campo de texto sem icone na Aba B", 
    "type": "text",
    "description": "Descrição do campo",
    "placeholder": "Como deve ser o texto inserido",
    "field": "nome_do_campo_text_abab", 
    "validation": "required:true|min:10|max:30",
    "tab": "aba_b"
}

Atributo	Descrição
type	Tipo do campo
field	Campo utilizado no tema para exibir o item desejado. Esse nome deve ser exatamente igual ao campo criado no tema
options	Opções do componente tab

Dentro do options do componente tab, temos outros elementos a serem configurados, segue descrição abaixo:

Atributo	Descrição
value	Valor da opção
content	Conteúdo da opção

Dentro do elemento que faz referência as abas, inserir o elemento tab, segue descrição abaixo:

Atributo	Descrição
tab	Faz referência a aba em que está relacionado