LogoLogo
Documentação de Temas
Documentação de Temas
  • 🚀COMECE POR AQUI
    • Temas Tray
    • Entenda o Tema
    • Meu primeiro tema
  • 💻Tray CLI
    • Instalação
    • Comandos
      • Erros Retornados
    • API para integrações Tray CLI
  • 🧱Construindo seu Template
    • Twig
      • O que é o Twig
      • Como ele é utilizado nos temas
      • Possibilidades de uso
      • Documentação para consulta
    • Visão Geral
      • Estrutura do Tema
      • Arquivo de configuração
      • Extensões de arquivos
      • Codificação de Arquivos
      • Avisos e Recomendações
      • Flags
    • Editor do Tema
      • Antigo
        • Como criar um Editor
        • Settings.html
      • Novo
        • Estrutura
          • Seções
          • Ícones
          • Componentes
            • Text
            • Textarea
            • Email
            • Number
            • Color
            • Checkbox
            • Radio
            • Select
            • Toggle
            • Upload
            • Tab
            • Alert
          • Exemplo de utilização
        • Thumb preview do tema
        • Imagens padrões
        • Como desabilitar e reabilitar?
      • Settings.json
    • Desenvolver
      • Atributo Google Analytics 4
      • Como adicionar o botão comprar na listagem dos produtos
      • Como criar um carrossel de produtos
      • Como inserir um vídeo na home da loja
      • Como manipular as variações de produtos
      • Como saber se o usuário está logado
      • Descontinuação do carrinho.php
      • Exibindo as formas de pagamento de um produto
      • Informação de preço com tempo de cache menor
      • Order Bump - Produtos Relacionados
      • Páginas Institucionais
      • Página de recuperação de senha
      • Página Live Shop
      • Recursos extras
      • Personalização das paginas de carrinho e checkout
    • Core Web Vitals
      • Desempenho
        • Lazyload
        • Primeira dobra
        • Fontes
        • Definição largura e altura
        • Sprite formas de pagamentos
      • Boas Práticas
        • Origem cruzada
      • Acessibilidade
        • Atributo Lang
        • Nome discernível
        • Atributo ALT
        • Contraste
        • IDs únicos
        • ARIA Labelled By
        • Tabindex
    • Otimizar e Medir
      • Carregamento na home
      • Layout AMP
      • Utilizando PWA na loja
    • Referências
      • Objetos
        • banner
        • breadcrumb
        • category
        • categories
        • filters
        • filter_options
        • links
        • pages
        • paginate
        • paymentMethods
        • product
        • productTabs
        • products
        • productFeatured
        • seals
        • search
        • settings
        • store
        • tags
        • tray
        • themePath
        • utils
      • Funções
        • asset()
        • Brands()
        • Categories()
        • Image()
        • Products()
        • Translation()
      • Data Attributes
        • Banners
        • Cart
        • Compare
        • Filter
        • Logged User
        • Search (Suggestion)
      • Componentes
        • Adicionar ao carrinho sem sair da página
        • Banner Desconto Progressivo
        • Banner extra com contagem de cliques
        • Banner Régua
        • Banner Rotativo
        • Botão "Voltar para o topo"
        • Botões Quantidade
        • Carrinho Lateral
        • Exibir a segunda imagem ao passar o mouse
        • Filtro Inteligente
        • Link flutuante para Whatsapp
        • Menu de Categorias
        • Menu de Categorias em 3 Níveis
        • Menu de Categorias com ver mais categorias
        • Menu de Categorias com Imagens
        • Menu de Categorias com Imagens - Hover
        • Menu de Categorias com produto
        • Menu de Marcas
        • Modal de Ofertas
        • Notícias com imagem na home
        • Novo Filtro Inteligente
        • Paginação
        • Porcentagem Desconto
        • Popup de Newsletter
        • Star Ranking
        • Selos da Loja
        • Selos do produto
        • Showcase ( List / Grid )
        • Topo Flutuante
        • Tray Login
        • Whatsapp flutuante
    • APIs Disponíveis
      • Busca
      • Carrinho de Compra
      • Categorias
      • Produtos
      • Variações de Produto
  • ✔️Homologação
    • Loja de Temas Tray
    • Requerimentos
      • Exclusividade
      • Identidade única
      • Estrutura necessária
      • Funcionalidades
      • Nova Busca e Filtro inteligente
      • Selos de produtos
      • Google Lighthouse
      • Consistência e funcionalidade
      • Compatibilidade com navegadores
      • Assets
      • Otimização para buscadores (SEO)
      • Acessibilidade
      • Configurações
      • Sistema de cores
      • Imagens responsivas
      • Nomes dos temas
      • Versionamento e notas de lançamento
      • Lojas demonstrativas
      • Documentação e suporte
    • Checklist obrigatório
    • Templates
    • Homologando o tema
    • Atualizando o tema
    • FAQ
  • 📣NOVIDADES
    • Tray CLI
    • Checklist
    • Tema Draft
    • Novo Editor
Powered by GitBook
On this page

Was this helpful?

  1. Construindo seu Template
  2. Editor do Tema
  3. Novo
  4. Estrutura
  5. Componentes

Radio

PreviousCheckboxNextSelect

Last updated 2 years ago

Was this helpful?

O componente do tipo radio deve ser utilizado quando o criador do tema disponibiliza ao usuário a seleção única em uma lista limitada de opções. Seu uso é similar ao componente select, porém, indica-se ser utilizado quando há menos de 3 opções. Abaixo é possível visualizar a aparência deste campo.

Estrutura padrão do campo:

{
    "label": "Título do campo radio",
    "type": "radio",
    "description": "Descrição do campo de opções",
    "field": "nome_do_campo_radio",
    "options": [{
        "value": "Valor left",
        "content": "Opção 01 string riscada",
        "style": true, 
        "description": "Descrição da opção 01",
        "url": "http://images.tcdn.com.br/theme_editor/1132188/draft.png"
    },
    {
        "value": true,
        "content": "Opção 02 boolean",
        "style": false,
        "description": "Descrição da opção 02",
        "url": "http://images.tcdn.com.br/theme_editor/1132188/icon-draft.png"
    },
    {
      "value": 500,
      "content": "Opção 03 number simples sem imagem",
      "description": "Descrição da opção 02"
    },
    {
      "value": [1, 2, 3],
      "content": "Opção 04 array simples sem imagem e descrição"
    }]            
}

Atributo
Descrição

label

Título do campo

type

Tipo do campo

description

Descrição do campo Caso não houver, deixar vazio

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 radio

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

Atributo
Descrição

value

Valor da opção

content

Conteúdo da opção

style

Estilo da opção Aplica o estilo do texto como rasurado, caso não houver, não utilizar essa chave

description

Descrição da opção Caso não houver, deixar vazio ou não utilizar

url

URL da opção Caso não houver, deixar vazio ou não utilizar

🧱
Exibição do campo radio