Componente Botão de formulário (v1) form-button-component-v

O componente Botão de formulário, dos Componentes Principais, permite a inclusão de um campo de botão em um formulário para acionar uma ação.

Uso usage

O componente Botão de formulário, dos Componentes Principais, permite a criação de um campo de botão, muitas vezes para acionar o envio do formulário. Ele deve ser usado com o componente Contêiner de formulário.

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

Versão e compatibilidade version-and-compatibility

Este documento descreve a versão v1 do componente 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 Botão de Formulário.

Exemplo de saída do componente sample-component-output

O exemplo a seguir foi retirado do We.Retail.

Captura de tela screenshot

HTML 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 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"
            }

Caixa de diálogo de configuração configure-dialog

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

Caixa de diálogo de design design-dialog

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

Detalhes técnicos technical-details

A documentação técnica mais recente sobre o componente Botão de Formulário pode ser encontrada no GitHub.

Todo o projeto de Componentes Principais pode ser baixado do GitHub.

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