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

O componente de 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 do campo de botão, geralmente para acionar a submissão do formulário e é destinado a ser usado junto com o componente de container de formulário.

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

Versão e compatibilidade

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

A tabela a seguir lista a compatibilidade de 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.

Exemplo de saída do componente

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 exige 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 de configuração permite que o autor do 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.

Todo o projeto de componentes principais pode ser baixado do GitHub.

Para obter mais detalhes sobre o desenvolvimento dos Componentes principais, consulte a documentação do desenvolvedor dos Componentes principais.

Nesta página