> For the complete documentation index, see [llms.txt](https://partners.tray.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://partners.tray.com.br/themes/construindo-seu-template/editor-do-tema/novo/estrutura/componentes/tab.md).

# Tab

O componente do tipo <mark style="color:blue;">tab</mark> 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.

<figure><img src="/files/F3A6gJYx0k8EQwvrQzkT" alt=""><figcaption><p><strong>Exibição do campo tab</strong> </p></figcaption></figure>

<figure><img src="/files/LDh6BgmugjoCXGJptFlL" alt=""><figcaption><p><strong>Exibição do campo tab</strong> </p></figcaption></figure>

{% hint style="info" %}
Compatível com o uso de **Text, Select e Radio**&#x20;
{% endhint %}

**Estrutura padrão do campo:**

{% code overflow="wrap" %}

```json
"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" 
    }
]
```

{% endcode %}

{% hint style="info" %}
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.&#x20;
{% endhint %}

**Exemplo de utilização do componente tab:**

```json
{
    "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"
}
```

<table><thead><tr><th width="203">Atributo</th><th>Descrição</th></tr></thead><tbody><tr><td>type</td><td>Tipo do campo</td></tr><tr><td>field</td><td>Campo utilizado no tema para exibir o item desejado. <br>Esse nome deve ser exatamente igual ao campo criado no tema</td></tr><tr><td>options</td><td>Opções do componente tab</td></tr></tbody></table>

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

<table><thead><tr><th width="205">Atributo</th><th>Descrição</th></tr></thead><tbody><tr><td>value</td><td>Valor da opção</td></tr><tr><td>content</td><td>Conteúdo da opção</td></tr></tbody></table>

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

<table><thead><tr><th width="212">Atributo</th><th>Descrição</th><th data-hidden></th></tr></thead><tbody><tr><td>tab</td><td>Faz referência a aba em que está relacionado</td><td></td></tr></tbody></table>