Componente do botão de formulário (v1)

O componente do botão de formulário do componente principal permite a inclusão de um campo de botão em um formulário para acionar uma ação.

Uso

O componente de Botão de formulário do componente principal permite a criação de campo de botão, muitas vezes para acionar o envio do formulário e deve ser usado junto com o componente de contêiner de formulário.

As propriedades do botão podem ser definidas pelo editor de conteúdo na caixa de diálogo configurar.

Versão e compatibilidade

Este documento descreve a v1 do Componente do botão de formulário, introduzido originalmente com a versão 1.0.0 dos Componentes principais com o AEM 6.3.

A tabela a seguir lista a compatibilidade da v1 do Componente do botão de formulário.

Versão do AEM Componente do botão de formulário v1
6.3 Compatível
6.4 Compatível
CUIDADO

Este documento descreve a v1 do Componente do botão de formulário.

Para obter detalhes sobre a versão atual do Componente do botão de formulário, consulte o documento Componente do botão de formulário.

Saída de componente de exemplo

A amostra a seguir é retirada de We.Retail.

Captura de tela

HTML

<div class="cmp cmp-button aem-GridColumn aem-GridColumn--default--12">
    <div class="cmp cmp-button">
        <button type="BUTTON" class="btn btn-action btn-primary" name="loveToast" value="ILoveToast">
            Click here if you love toast!
        </button>
    </div>
</div>

JSON

"container": {
              "columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
              "columnCount": 12,
              "gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
              ":items": {
                "button": {
                  "columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
                  ":type": "weretail/components/form/button",
                  "name": "loveToast",
                  "jcr:title": "Click here if you love toast!",
                  "type": "submit",
                  "value": "ILoveToast"
                }
              },
              ":itemsOrder": [
                "button"
              ],
              ":type": "weretail/components/form/container"
            }
OBSERVAÇÃO

A exportação JSON dos Componentes principais requer a versão 1.1.0 dos Componentes principais. Consulte as informações de compatibilidade dos Componentes principais v1 para obter mais informações.

Configurar caixa de diálogo

A caixa de diálogo configurar permite que o autor de conteúdo defina os parâmetros do botão.

  • Tipo

    • Botão
    • Enviar
  • Título - O texto exibido no botão

    • Se nenhum fornecido, o padrão será o tipo de botão
  • Nome - O nome do botão, que é enviado com os dados do formulário

  • Valor - O valor do botão, que é enviado com os dados do formulário

Caixa de diálogo Design

Não há caixa de diálogo de design para o componente Botão de formulário.

Detalhes técnicos

A documentação técnica mais recente sobre o Componente do botão de formulário pode ser encontrada no GitHub.

O projeto de componentes principais inteiro pode ser baixado do GitHub.

Mais detalhes sobre o desenvolvimento dos Componentes principais podem ser encontrados na documentação do desenvolvedor dos Componentes principais.

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now