Documentação de Temas

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.

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"
}

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

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

PreviousUploadNextAlert

Last updated