# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://partners.tray.com.br/themes/construindo-seu-template/editor-do-tema/novo/estrutura/componentes/tab.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.