表单按钮组件(v1)

核心组件表单按钮组件允许在表单中包含按钮字段以触发操作。

使用

核心组件表单按钮组件允许创建按钮字段，通常用于触发表单的提交，并准备与表单容器组件一起使用。

配置对话框中的内容编辑器可定义按钮属性。

版本和兼容性

本文档介绍了表单按钮组件v1，该组件最初随AEM 6.3核心组件1.0.0版一起引入。

下表列出了表单按钮组件v1的兼容性。

组件输出示例

以下是从We.Retail获取的示例。

屏幕快照

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

配置对话框

配置对话框允许内容作者定义按钮的参数。

• 类型

  • 按钮
  • 提交

• 标题 — 按钮上显示的文本

  • 如果未提供，则默认为按钮类型

• 名称 — 随表单数据一起提交的按钮的名称

• 值 — 随表单数据一起提交的按钮的值

“设计”对话框

表单按钮组件没有设计对话框。

技术详细信息

有关表单按钮组件的最新技术文档，请参阅GitHub。

可以从GitHub下载整个核心组件项目。

有关开发核心组件的更多详细信息，请参阅核心组件开发人员文档。